display: 表示為伸縮容器
參考屬性：
- flex |設(shè)置為容器
-
inline-flex| 行內(nèi)元素設(shè)置
容器模型
flex-direction: 設(shè)置容器的方向
參考屬性：
- row | 水平排列 從左往右(圖3)
- column | 垂直排列 從上往下(圖2)
- row-reverse | 反向水平排列 從右往左 (圖4)
- column-reverse | 反向垂直 從下往上 (圖1)
flex-direction
flex-wrap: 容器空間不足時是否換行顯示
參考屬性：
- nowrap | 不允許換行
- wrap | 換行
- wrap-reverse | 反向排序并向上換行
wrap
flex-flow: 該屬性是direciton和wrap的縮寫屬性,是兩個屬性的縮寫
- 默認值為row nowrap
justify-content:沿主軸對齊的方式(主軸方向參考flex-direciton屬性來確定)|
參考屬性：
- flex-start |從主軸起始位置對齊 (左對齊)
- flex-end | 從主軸結(jié)束位置對齊 (右對齊)
- center | 向主軸方向中間靠齊 ( 居中)
- space-between| 平均分布在主軸上 第一個view緊貼主軸起始點,最后一個view緊貼主軸結(jié)束點 (兩端對齊)
-space-around| 平均分布 主軸兩端不緊貼 (兩端對齊但不貼邊,但每個項目兩側(cè)的間隔相等)
justify-content
align-items: 對于交叉軸的位置
- flex-start | 起始對齊
- flex-end | 結(jié)束對齊
- center | 居中
- baseline | 基線對齊 也就是基于內(nèi)容對齊
- stretch | 拉伸鋪滿
align-items
align-content: 在開啟換行后,或者多行展示主軸內(nèi)容后生效在交叉軸上排列的屬性
- flex-start |與交叉軸的起點對齊。
- flex-end | 與交叉軸的終點對齊。
- center | 與交叉軸的中點對齊。
- space-between | 與交叉軸兩端對齊，軸線之間的間隔平均分布。
- space-around | 每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值） |軸線占滿整個交叉軸。
align-content
本文參考了 阮一峰的Flex 布局教程：語法篇
圖片均來自阮一峰的博客
