其它屬性（block ，inline-block）轉變為flex屬性display : flex

容器的屬性

flex-direction： 決定主軸方向（即項目的排列順序）

• row ：默認值，主軸在水平方向，起點在左端
• row-reverse ：主軸在水平方向，起點在右端
• column ：主軸在垂直方向，起點在上沿
• column-reverse ：主軸在垂直方向，起點在下沿

flex-wrap ： 默認情況下，項目都排列在一條線（軸線）上，若果一條軸線排不下，如何換行

• nowrap :（默認值）不換行
• wrap： 換行，第一行在上方
• wrap-reverse : 換行，第一行在下方

flex-flow：

• 默認值為 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 : 與交叉軸兩端對齊，軸線之間的間隔平均分布

• space-around : 每個軸線兩側的間隔相等。所以，軸線之間的間隔比軸線與邊框之間的間隔大一倍

• stretch: (默認值) 軸線占滿整個交叉軸

項目的屬性

order ：定義項目的排列順序。數值越小，排列越靠前

• 默認為0

flex-grow： 定義項目的放大比例，

• 默認為0 ，即如果存在剩余空間，也不放大。
• 如果所有項目的flex-grow屬性都為0，則它們將等分剩余空間（如果有的話）。 如果有一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

flex-shrink： 定義項目的縮小比例，

• 默認為1 ，即如果空間不足，該項目將縮小。
• 如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比縮小。如果一項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者縮小。負值對該屬性無效

flex-basis： 定義在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余的空間。

• 它的默認值為auto，即項目的本來大小。
• 它可以設為跟width或height屬性一樣的值（比如350px）,則項目將占據固定空間

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屬性完全一致。

• flex-start： 交叉軸的起點對齊
• flex-end： 交叉軸的終點對齊
• center： 交叉軸的中點對齊
• baseline： 項目的第一行文字的基線對齊
• stretch: (默認值) 如果項目未設置高度或設為auto，將占滿整個容器的高度

flex 彈性盒模型