詳解 Flex 佈局

前言:

FlexBox不只在前端中應用普遍，同時在移動端也佔有很是重要的地位，好比 iOS 中的UIStackView，Facebook 的 Yoga 庫；微信小程序和 RN 都支持這種佈局方式。各大瀏覽器對 FlexBox 支持比較完善，尤爲對於移 Web，iOS 和 Android 在很早的版本中就支持了這種佈局。全部我建議不管是移動端，仍是泛前端的同窗都應該學習一下這種佈局方式。

備註:FlexBox 佈局能夠經過 flex-direction 來控制 flex-item 的佈局方向

概念

須要解釋幾個概念：
flex-container：佈局容器，使用 display：flex 的標籤；
flex-item: 容器中的直接子元素；
main-axis：主軸，佈局方向爲 row 或者 row-reverse 時它是水平方向。佈局方向爲 column 或者 column-reverse 時它是垂直方向。
cross-axis: 縱軸，與主軸垂直的軸；
main-start: 主軸的起點，佈局方向爲 row 時它的起點在左側，row-reverse 爲右側。佈局方向爲 column 時起點在頂部，column-reverse 時起點爲底部。
main-end: 主軸結束的點，與 main-start 相反；
cross-start: 縱軸的起點；
cross-end：縱軸的結束點，與 cross-start 相反
複製代碼

1. flex-direction:

• flex items 默認都是沿main axis(主軸) 從 main start 開始向 main end 排布
• flex-direction決定了 main axis(主軸) 方向, 有四個取值:

row（默認）：從水平方向的左側開始佈局；
row-reverse：從水平方向的右側開始佈局；
column：從垂直方向的頂部開始佈局；
column-reverse: 從垂直方向的底部開始佈局；
複製代碼

2. justify-content :

決定了 flex items 在 main axis(主軸)上的對齊方式,主軸不必定是水平方向，不能把 justify-content 看作是控制水平方向的對齊方式。它主要有如下幾個值：

flex-start（默認）：與主軸的起始位置（main start）對齊；
flex-end：與主軸的結束位置（main end）對齊；
center：居中於主軸；
space-around: 每一個 item 的間距相等, flex item 之間的距離相等, flex item 與main start 和 main end之間的距離是flex items 之間距離的一半；
space-evenly: 每一個 item 的間距相等, flex item 之間的距離相等, flex item 與main start 和 main end之間的距離等於flex items 之間的距離；
space-between: 左右無邊距, flex item 之間的距離相等,左右兩邊與 main start 和 main end 對齊；
複製代碼

3.align-items

flex-start：與縱軸的起始位置（cross start）對齊；
flex-end：與縱軸的結束位置（cross end）對齊；
center：居中與縱軸；
baseline：與基準線對齊；
stretch(默認）：當flex items在cross axis方向上的size爲auto時,會自動拉伸填充至flex container
複製代碼

4.flex-wrap

決定了flex container是多行仍是單行

nowrap（默認）：單行顯示；
wrap：多行顯示；
wrap-reverse：多行顯示；
複製代碼

5.flex-flow

它是 flex-direction 和 flex-wrap 的簡寫，

好比 flex-flow: row nowrap 等價於
 flex-direction : row
flex-wrap : nowrap。
複製代碼

6.align-content

決定了多行flex item 在 cross axie 方向上的對齊方式,用法和 justify-content 類似

strech(默認值):與align-items的 strech相似
fles-start: 與cross start 對齊
fles-end: 與cross end 對齊
center: 居中對齊
space-around: 每一個 item 的間距相等, flex item 之間的距離相等, flex item 與cross start 和 cross end之間的距離是flex items 之間距離的一半；
space-evenly: 每一個 item 的間距相等, flex item 之間的距離相等, flex item 與cross start 和 cross end之間的距離等於flex items 之間的距離；
space-between: 左右無邊距, flex item 之間的距離相等,左右兩邊與 cross start 和 cross end 對齊；
複製代碼

7. order

決定了 flex items的排布順序

• 能夠設置任意整數(正整數 負整數 0), 數值越小排下越前面
• 默認值都是0

8. align-self

flex items 能夠經過 align-self 覆蓋 flex container設置的 align-items

auto(默認值): 遵循flex container的align-items設置
strech flex-start flex-end center baseline 效果跟align-items一致
複製代碼

9. flex-grow

決定了flex items 如何擴展,它的做用就是，當全部的 item 未佔滿容器的寬度時，item 該如何擴充本身以填滿容器的剩餘空間。理解這個屬性前關鍵要理解剩餘空間，在 flex 容器中，若是全部 item 的寬度和小於容器的寬度，那麼容器的剩餘空間等於容器寬度減去全部item寬度的和。

• 每一個 item 的寬度爲 150px，容器寬度爲 600 px，剩餘空間爲 600 - 3*150 = 150px， 一圖勝千言：

  

• 若是給每一個 item 設置 flex-grow 爲 1，它表示每一個 item 佔用相同比例的剩餘空間，這樣每一個 item 增長的寬度爲 150 * 1/3 = 50px。最終效果變成：

  

• flex-grow 的默認值爲 0，表示即便有剩餘空間，item 也不會擴充。它不能爲負數，可是能夠爲小數，若是上面的例子中，給每一個 item 設置 flex-grow 爲 0.2，這樣每一個 item 增長的寬度爲 150 * 0.2 = 30px，最終還會有 60px 的剩餘空間未被佔用。

  

  總之 flex-grow 的值能夠理解成比例，總剩餘空間能夠當作 1，剩餘空間會受 flex-basis 影響，下面會提到這個屬性的使用。還有一點須要明確，item 增加會受 max-width 的影響，增加後的最大長度只能是 max-width。 #####9.flex-shrink （收縮比例）：佔缺乏空間的比例（item*shrink做爲收縮比例），當全部的 item 的寬度和大於容器的寬度，就會出現容器空間不足的狀況，這時能夠經過縮放比例來縮放每一個 item 的寬度。
• 假如每一個 item 的寬度爲 250px，容器寬度爲 600 px，缺乏空間爲 600 - 3*250 = -150px， 一圖勝千言：

  

• 一旦出現空間不足，能夠經過 flex-shrink 控制每一個 item 是否要進行縮放，縮放的比例是多少。若是設置 flex-shrink：1，每一個 item 將縮放一樣的寬度，其值爲 150 * 1/3 = 50px，效果以下：

  

  flex-shrink 的默認值是 1，也就是說當空間不足的時候，item 會以一樣的尺寸進行縮放。可是這個屬性和 flex-grow 在極端的狀況下表現並不相同，由於在縮小的過程當中，不會把 item 的尺寸縮小到 0，它會受 min-content 的影響，也會受 min-width 的影響，縮到必定尺寸後它就再也不進行縮放了。

10.flex-basis

用來設置 flex items 在 main axis方向上的base size

auto (默認)：content取決於自己內容的size
決定flex items最終base size因素優先級由高到低
max-width\max-height\min-width\min-height
flex-basis
width\height
複製代碼