轉載：如何靈活運用CSS中的Flex彈性佈局？

做者 | 向建峯

來源 | 慕課網（imooc.com）

前言

Flex（Flexible Box），意爲」彈性佈局」。「彈性」，顧名思義，就是具備彈簧的特性啦，可以自由的伸縮（有點自適應的意思啦）。其實Flex並非最近纔出現的，而是早在十年前它就被提出。2009年，W3C提出了一種新的方案—-Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。

Flex 佈局如何使用？

任何一個容器均可以指定爲Flex佈局

.box {
    display: flex;
}
複製代碼

任何一個容器均可以指定爲Flex佈局

.box {
    display: inline-flex;
}
複製代碼

示例：

Flex 概念知識

採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱」容器」。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱」項目」。

容器默認存在兩根軸：

水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。

項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

是否是感受又學到了？概念的東西瞭解就行了，這個不用記憶，不會跟上學背課文同樣，還考試了。

Flex 容器屬性

1、flex-direction：決定項目（item）的排列方向

flex-direction有四個值：

1. row（默認值）：主軸爲水平方向，起點在左端。
2. row-reverse：主軸爲水平方向，起點在右端。
3. column：主軸爲垂直方向，起點在上沿。
4. column-reverse：主軸爲垂直方向，起點在下沿。

上方那個示例圖，咱們稍稍變陣一下，主軸設置爲垂直方向，就會出現下圖佈局。

示例：

還能夠設置主軸爲垂直方向，起點在下沿。

示例：

是否是以爲之後佈局就用他（Flex）了？

2、flex-wrap

默認狀況下，item都排在一條線（又稱」軸線」）上。flex-wrap屬性定義了，若是一條軸線排不下，item的換行方式。

flex-wrap有三個值：

1. nowrap（默認）：不換行
2. wrap：換行，第一行在上方。
3. wrap-reverse：換行，第一行在下方。

示例：

3、flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
複製代碼

4、justify-content：定義了item在主軸上的對齊方式

justify-content有五個值：

1. flex-start（默認值）：左對齊
2. flex-end：右對齊
3. center：居中
4. space-between：兩端對齊，項目之間的間隔都相等。
5. space-around：每一個item兩側的間隔相等。因此，item之間的間隔比item與邊框的間隔大一倍。

示例：

5、align-items：Item在交叉軸上如何對齊

1. flex-start：交叉軸的起點對齊。
2. flex-end：交叉軸的終點對齊。
3. center：交叉軸的中點對齊。

示例：

4. baseline: 項目的第一行文字的基線對齊

示例：

5. stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

6、align-content：多根軸線的對齊方式

多根軸線如何出現？寬度超出，換行後就會有多根軸線了。

1. flex-start：與交叉軸的起點對齊。
2. flex-end：與交叉軸的終點對齊。
3. center：與交叉軸的中點對齊。
4. space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
5. space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
6. stretch（默認值）：軸線佔滿整個交叉軸。 對比一下添加align-content和沒有align-content的區別：

項目（Item）的屬性

1、order

Item的排列順序。數值越小，排列越靠前，默認爲0。

示例：

賦予item，一個排序值，根據這個值進行排序。沒有設置值的默認是0。

2、flex-grow

定義Item的放大比例，默認爲0，即若是存在剩餘空間，也不放大。意思就是將100%寬/高按什麼比例分。

示例：

舉例：若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。（看上圖示例）

3、flex-shrink

定義了Item的縮小比例，默認爲1，即若是空間不足，該Item將縮小

看上圖：3個item的寬度和:100+200+200=500px，超出了box（400px）的寬度（超出了100px的寬），這時候item1/item2都設置了flex-shrink爲0，而item3設置了flex-shrink爲1，因此，寬度不夠時，item3將收縮，這裏item3實際的寬度就是100px。

再看下圖：

item1/item3設置flex-shrink爲1，而item2的flex-shrink爲0，也就是說，此時寬度超出後，將由item一、item3來等比縮小寬度，item2保持原有寬度。

4、flex-basis

flex-basis屬性定義了在分配多餘空間以前，Item佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即Item的原本大小。

示例：

這個屬性能夠直接設置寬高代替，如上圖註釋部分。

5、flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

因此最前面的幾個示例，都直接寫的flex，其實flex就flex-grow, flex-shrink 和 flex-basis的簡寫。

6、align-self

align-self屬性容許單個Item有與其餘Item不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

示例：

這樣，就會把容器的align-items，覆蓋掉。

看完上面內容，是否是發現Flex基本上能夠搞定大部分的前端佈局？確實是這樣，它就是這麼強大，這也是他廣受你們喜好的一個重要緣由，若是不考慮低版本瀏覽器兼容問題，我相信，float你們應該用的愈來愈少了。