一、Flex 佈局的作用

Flex 是 Flexible Box 的縮寫，意為“彈性佈局”，用來為盒狀模型提供最大的靈活性。

• 任何一個容器、行內元素都可以指定為 Flex 佈局；
• Webkit 核心的瀏覽器，必須加上 -webkit字首；
• 使用 Flex 佈局以後，子元素的float、clear和vertical-align屬性將會失效。

二、基本概念

採用 Flex 佈局的元素， 稱為 Flex 元素（flex container），簡稱“容器”；它的所有子元素自動成為容器成員，成為 Flex 專案（flex item），簡稱“專案”。

三、容器內容：

1.水平的主軸（main axis）:

• 開始位置：main start
• 結束位置：main end

2.垂直的交叉軸（cross axis）:

• 開始位置： cross start
• 結束位置：cross end

3.專案預設沿主軸排列:

• 單個專案佔據的主軸空間叫做main size;
• 單個專案佔據的交叉軸空間叫做cross size;

四、容器的屬性

flex-direction：決定主軸的方向（即專案的排列方向）

• row(預設值)：主軸為水平方向，起點在左端；
• row-reverse
  ：主軸為水平方向，起點在右端；
• colum：主軸為垂直方向，起點在上沿；
• colum-reverse: 主軸為垂直方向，起點在下沿。

flex-wrap：該屬性定義，如果一條軸線排不下，如何換行。預設情況下，專案都排在一條直線（又稱“軸線”）上。

• nowrap（預設值）：不換行；
• wrap: 換行，第一行在上方；
• wrap-reverse: 換行，第一行在下方。

flex-flow：是flex-direction 屬性與 flex-wrap 屬性的簡寫形式，預設值為row nowrap。

justify-content：定義了專案在主軸上的對齊方式。具體對齊方式與軸的方向有關

。

• flex-start（預設值）:主軸的起點對齊；
• flex-end：主軸的終點對齊；
• center: 居中
• space-between: 兩端對齊，專案之間的間隔都相等
• space-around: 每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

align-items：定義專案在交叉軸上如何對齊；具體的對齊方式與交叉軸的方向有關。

• flex-start: 交叉軸的起點對齊；
• flex-end:交叉軸的終點對齊；
• center:交叉軸的中點對齊；
• baseline：專案的第一行文字的基線對齊；
• stretch（預設值）: 如果專案未設定高度或設為 auto，將佔滿整個容器的高度。

align-content：定義多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

• flex-start: 與交叉軸的起點對齊；
• flex-end： 與交叉軸的終點對齊；
• center: 與交叉軸的中點對齊；
• space-between: 與交叉軸兩端對齊，軸線之間的間隔平均分佈。
• stretch（預設值）： 軸線沾滿整個交叉軸。

五、專案的屬性

order：定義專案的排列順序，數值越小，排列越靠前，預設為0。

flex-grow:定義專案的放大比列，預設為0，即如果存在剩餘空間，也不放大。

• 如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。
• 如果一個專案的flex-grow屬性為2，其他專案都是為1，則前者佔據的剩餘空間將比其他項多一倍。

flex-shrink：定義了專案縮小比例，預設為1，即如果空間不足，該專案將縮小。

• 如果所有的專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。
• 如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。

flex-basis: 定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。

• 它的預設值為 auto,即專案的本來大小。
• 它可以設定跟width或height屬性一樣的值（比如

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

該屬性有兩個快捷值：auto(1 1 auto)和none(0 0 auto);
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

align-self:允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

六、 CodePen：

• 骰子：https://codepen.io/JiaxiaLi/full/gQGZvV
• 基本網格佈局：https://codepen.io/JiaxiaLi/full/pQaVMj

資料參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)