一、結構：flex布局 是由一個大的容器加上多個子元素組成。
<view class="container"> <view class="box1">1</view> <view class="box2">2</view> <view class="box3">3</view> </view>
二、使用flex布局，就在父容器里面使用一個flex
.container{
display: flex;
}
三、使用flex和未使用flex對比。
原理：類似於css里面的 block 變成了 inline-block。
四、flex-direction和其參數row / column
五、flex-direction和其參數row-reverse / column-reverse
注：上面這兩個參數的作用不僅把方塊逆序排布了，同時把對齊方式也改變了。 解決方法 -------- 看下面
六、1、justify-content和其參數 flex-end 、 flex-start;
由於 row-reverse / column-reverse 改變了對齊方向，所以 flex-end / flex-start 作用效果也相反
2、justify-content和其參數 center; （居中對齊）
3.justify-content和其參數 space-between; （兩端對齊）
4.justify-content和其參數 justify-content: space-around; （方塊左右兩邊的邊距相同）
5、justify-content和其參數 justify-content: space-evenly;（方塊等分）
七、align-content和其參數 center; 補充知識點（主軸、交叉軸 的區分 相當於平面坐標系中的 X 和 Y 軸）
flex-column 這個屬性決定了誰是主軸，誰是交叉軸
justify-content: 這個屬性控制主軸的對齊方式
align-items:這個屬性控制交叉軸的對齊方式
當主軸和交叉軸都居中的時候 如下 |||
它會占據整個父容器的居中位置。
未完。。。。。
以上只是個人理解，如有錯誤，歡迎指教。