[TOC] >參考阮一峰[網址](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) ## 主軸屬性 6個屬性在容器上 ``` flex-direction [ row(默認) | row-reverse | column | column-reverse]; flex-wrap [nowrap(默認) | wrap | wrap-reverse(第一行下面)] justify-content [flex-start(默認值)|flex-end| center | space-between (兩端對齊) | space-around(每個項目兩側的間隔相等)] align-items [flex-start | flex-end | center | baseline | stretch(默認)] align-content 多軸對齊 [flex-start | flex-end | center | baseline | stretch] ``` **align-items 項目在交叉軸上如何對齊**  > stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。 **align-content 多軸對齊方式**  ## 項目屬性 6個屬性在項目上 ``` order 默認為0,排列順序。數值越小，排列越靠前 flex-grow item的放大比例，默認0(即存在空間也不放大)如item1 為1 ，item2 為2，則item2為item1的兩倍寬 flex-shrink 默認為1,item的縮小比例,為0則表示不縮小 flex-basis align-self 定義單個項目的對齊方式 ``` **flex-grow** - flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。 - 如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。  **flex-basis** - `flex-basis`屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為`auto`，即項目的本來大小。 - 它可以設為跟`width`或`height`屬性一樣的值（比如350px），則**項目將占據固定空間**。 **align-self** `align-self`屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋`align-items`屬性  ## 實例 ### 水平垂直居中顯示 ``` display:flex; align-items:center; //水平對齊 justify-content:center; // 居中對齊 ``` ### 行對齊，1一個元素固定，另一個元素填充剩余空間 ``` .parent{ display:flex; flex-direction:row; .item1{ with:20px; flex-grow:0; // 默認為0 } .item2{ flex-grow:1; // 默認為1 } } ```