Flexbox

一、display : flex | flex-inline；用於伸縮容器；

二、flex-direction : row | row-reverse | column | column-reverse；用於伸縮容器；

• row(默認值)：在「ltr」排版方式下從左向右排列；在「rtl」排版方式下從右向左排列。

• row-reverse：與row排列方向相反，在「ltr」排版方式下從右向左排列；在「rtl」排版方式下從左向右排列。

• column：相似 於row，不過是從上到下排列

• column-reverse：相似於row-reverse，不過是從下到上排列。

三、flex-wrap : nowrap | wrap | wrap-reverse；用於伸縮容器；

• nowrap(默認值)：伸縮容器單行顯示，「ltr」排版下，伸縮項目從左到右排列；「rtl」排版上伸縮項目從右向左排列。

• wrap：伸縮容器多行顯示，「ltr」排版下，伸縮項目從左到右排列；「rtl」排版上伸縮項目從右向左排列。

• wrap-reverse：伸縮容器多行顯示，「ltr」排版下，伸縮項目從右向左排列；「rtl」排版下，伸縮項目從左到右排列。（和wrap相反）

四、flex-flow : 是flex-direction 與 flex-wrap 的壓縮版本，默認值是：row nowrap；

五、justify-content : flex-start | flex-end | center | space-between | space-around; 用於伸縮容器；

• flex-start(默認值)：伸縮項目向一行的起始位置靠齊。

• flex-end：伸縮項目向一行的結束位置靠齊。

• center：伸縮項目向一行的中間位置靠齊。

• space-between：伸縮項目會平均地分佈在行裏。第一個伸縮項目一行中的最開始位置，最後一個伸縮項目在一行中最終點位置。

• space-around：伸縮項目會平均地分佈在行裏，兩端保留一半的空間。

六、align-item : flex-start | flex-end | center | baseline | stretch; 用於伸縮容器；

• flex-start：伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。

• flex-end：伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊 。

• center：伸縮項目的外邊距盒在該行的側軸上居中放置。

• baseline：伸縮項目根據他們的基線對齊。

• stretch（默認值）：伸縮項目拉伸填充整個伸縮容器。此值會使項目的外邊距盒的尺寸在遵守「min/max-width/height」屬性的限制下儘量接近所在行的尺寸。

七、align-content : flex-start | flex-end | center | space-between | space-around | stretch; 用於伸縮容器；

• flex-start：各行向伸縮容器的起點位置堆疊。

• flex-end：各行向伸縮容器的結束位置堆疊。

• center：各行向伸縮容器的中間位置堆疊。

• space-between：各行在伸縮容器中平均分佈。

• space-around：各行在伸縮容器中平均分佈，在兩邊各有一半的空間。

• stretch（默認值）：各行將會伸展以佔用剩餘的空間。

八、order : <int>; 用於伸縮項目；「order」屬性能夠控制伸縮項目在伸縮容器出現的順序。

九、flex-grow : <number>; 默認是：0；用於伸縮項目；

若是全部伸縮項目的「flex-grow」設置了「1」，那麼每一個伸縮項目將設置爲一個大小相等的剩餘空間。若是你給其中一個伸縮項目設置了「flex-grow」值爲「2」，那麼這個伸縮項目所佔的剩餘空間是其餘伸縮項目所佔剩餘空間的兩倍。

十、flex-shrink : <number> (默認值爲： 1)；用於伸縮項目；伸縮項目的收縮能力；

十一、flex-basis : <length> | auto (默認值爲： auto) ;用來設置伸縮基準值，剩餘的空間按比率進行伸縮；用於伸縮項目；

十二、flex : 這是「flex-grow」、「flex-shrink」和「flex-basis」三個屬性的縮寫。其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數。默認值爲「0 1 auto」。

1三、align-left :  flex-start | flex-end | center | baseline | stretch; 用於伸縮項目；

• flex-start：伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。

• flex-end：伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊 。

• center：伸縮項目的外邊距盒在該行的側軸上居中放置。

• baseline：伸縮項目根據他們的基線對齊。

• stretch（默認值）：伸縮項目拉伸填充整個伸縮容器。此值會使項目的外邊距盒的尺寸在遵守「min/max-width/height」屬性的限制下儘量接近所在行的尺寸。