1. 基本概念
flex 是一種新的布局方式。
偷懶沒畫圖，網(wǎng)上盜了一張
1.1 軸：
- 主軸（main axis）
- 側(cè)軸（cross axis）
默認(rèn)情況下，主軸為水平方向的軸，側(cè)軸為垂直方向的軸；
但主軸、側(cè)軸與方向無關(guān)，因為通過修改 flex-direction 屬性，可以改變主軸、側(cè)軸的方向。
1.2 主軸：起點、終點
- 主軸起點（main start）
- 主軸終點（main end）
主軸的開始位置（與邊框的交叉點）叫做 main start，結(jié)束位置叫做 main end
1.3 側(cè)軸：起點、終點
- 側(cè)軸起點（cross start）
- 側(cè)軸終點（cross end）
側(cè)軸的開始位置叫做 cross start，結(jié)束位置叫做 cross end。
1.4 尺寸：
- 主軸尺寸（main size）
- 側(cè)軸尺寸（cross size）
flex 子元素的寬叫做 main size，高叫做 cross size。
2. flex 容器屬性
啟動 flex 布局，修改容器本身 display 屬性值為 flex 即可：display: flex;
2.1 flex-direction 主軸方向
- row（默認(rèn)值）：主軸為水平方向，起點在左
- row-reverse：主軸為水平方向，起點在右
- column：主軸為垂直方向，起點在上
- column-reverse：主軸為垂直方向，起點在下
2.2 flex-wrap 換行
- nowrap（默認(rèn)）：不換行
- wrap：換行，第一行在上方
- wrap-reverse：換行，第一行在下方
2.3 flex-flow 縮寫
- row nowrap（默認(rèn)值）
- 是 flex-direction flex-wrap 這兩個屬性的縮寫
2.4 justify-content 主軸方向的對齊方式
- flex-start（默認(rèn)值）：主軸起點對齊
- flex-end：主軸終點對齊
- center：主軸居中對齊
- space-between：兩端對齊，flex 子元素之間的間隔都相等（空間放中間）
- space-around：每個 flex 子元素兩側(cè)的間隔相等（空間放周圍）
2.5 align-items 側(cè)軸方向的對其方式
- stretch（默認(rèn)值）：若 flex 子元素未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
- flex-start：側(cè)軸起點對齊
- flex-end：側(cè)軸終點對其
- center：側(cè)軸居中對其
- baseline：flex 子元素第一行文字的基線對齊。
2.6 align-content 多行、列內(nèi)容對其方式（用的較少，多個側(cè)軸）
- stretch（默認(rèn)）：伸展占滿側(cè)軸
- flex-start：側(cè)軸起點對齊
- flex-end：側(cè)軸終點對其
- center：側(cè)軸居中對其
- space-between：兩端對齊，flex 子元素之間的間隔都相等（空間放中間）
- space-around：每個 flex 子元素兩側(cè)的間隔相等（空間放周圍）
3. flex 子元素屬性
3.1 flex-grow 增長比例（空間過多時）
- 子元素的增長比例，默認(rèn)為 0，即不會增長
3.2 flex-shrink 收縮比例（空間不夠時）
- 子元素的收縮比例，默認(rèn)為 1
3.3 flex-basis 默認(rèn)大小（一般不用）
- 定義在分配多余空間之前，flex 子元素占據(jù) main axis 空間（默認(rèn)所占空間大小）
3.4 flex 縮寫
- 是 flex-grow flex-shrink flex-basis 這三個屬性的縮寫
3.5 order 順序（可代替雙飛翼）
- 定義子元素的排列順序
3.6 align-self 自身的對其方式
- 定義子元素自身的對其方式
小注：后續(xù)更新配圖 + 實戰(zhàn)例子
參考：阮一峰教程
