基本概念
Flex是Flexible Box的縮寫，顧名思義為“彈性布局”，用來為盒裝模型提供最大的靈活性。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
如何轉換為Flex布局
- 任何一個容器都可以指定為Flex 布局。
.box{display:flex;}
- 行內元素也可以使用Flex布局。
.box{display:inline-flex;}
- webkit內核的瀏覽器，必需加上-webkit前綴
.box{
display:-webkit-flex;
display:flex;
}
注意：設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
Flex布局的屬性
當談到flex布局時，可能大部分人都和我一樣，除了最常用的justify-content與align-items兩個屬性，其他的屬性了解的並不多。
其實，Flex布局是一個完整的模塊而不是一個單獨的屬性，它包括了完整的一套屬性。其中有的屬性是設置在容器（container，也可以叫做父元素，稱為flex container）上，有的則是設置在容器的項目上（item，也可以叫做子元素，稱為flex items）上。
那么我們將從 容器上的屬性 和 項目上的屬性 分別來講起：
1.容器的屬性
以下6個屬性設置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-direction屬性決定主軸的方向（即項目的排列方向）。
.box {flex-direction:row | row-reverse | column | column-reverse;}
row（默認值）:主軸為水平方向，起點在左端
row-reverse:主軸為水平方向，起點在右端
column:主軸為垂直方向，起點在上沿
column-reverse:主軸為垂直方向，起點在下沿
flex-wrap
默認情況下，項目都排在一條線（又稱“軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box {flex-wrap: nowrap | wrap | wrap-reverse;}
nowrap（默認值）:不換行
wrap:換行，一行放不下時，會在第一行下方排列顯示
wrap-reverse:換行，一行放不下時，會在第一行上方排列顯示
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認 row nowrap。
.box{flex-flow:<flex-direction> || <flex-wrap>;}
justify-content
justify-content屬性定義了項目在主軸上的對齊方式
.box{justify-content:flex-start | flex-end | center | space-between |space-around;}
具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
align-items
align-items屬性定義項目在交叉軸上如何對齊。
.box{align-items:flex-start | flex-end | center |baseline | stretch;}
具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上之下。
flex-start：交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
align-content
align-content屬性是定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
.box{align-content:flex-start | flex-end | center | spance-between | space-around |stretch;}
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
2.項目的屬性
以下6個屬性設置在項目上。
- order
- align-self
- flex
- flex-grow
- flex-shrink
- flex-basis
order
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0.
.item{order:<integer>;}
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，等同於stretch。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}
該屬性可以取6個值，除了auto，其他都與align-items屬性完全一致。
flex
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為0 1 auto(后面兩個屬性可選)。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
該屬性有兩個快捷值：auto（1 1 auto）和none（0 0 auto）.
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
下邊到了我們的重點
flex 的三個子屬性：flex-basis、flex-grow、flex-shrink。
flex-basis
flex-basis (默認值:auto) 屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。
如果子容器同時設置 flex-basis (除值為 auto 外) 和 width (或者在 flex-direction: column 情況下設置了height)，那么 width(height) 屬性會被覆蓋，也就是說 flex-basis 具有 更高的優先級。
有一點需要注意，如果 flex-basis 和 width(height) 其中有一個是 auto，那么另外一個非auto的屬性優先級會更高。
.item {flex-basis: <length> | auto;}
如果設置為0, 則子元素內容周圍的剩余空間不會根據flex-grow按比例分配，如果設置為auto，則子元素周圍的剩余空間會根據flex-grow按照比例分配。
flex-grow
flex-grow規定在空間允許的情況下，子元素如何按照比例分配可用剩余空間。
如果所有的子元素的屬性都設定為1，則父元素中的剩余空間會等分給所有子元素。
如果其中某個子元素的flex-grow設定為2，則在分配剩余空間時該子元素將獲得其他元素二倍的空間（至少會盡力獲得）。
默認值為0，意味着即使有剩余空間，各子元素也不會放大。
.item {flex-grow: <number>;}
注：flex-grow不接受負值。
flex-shrink
與flex-grow屬性類似，flex-shrink定義了空間不足時項目的縮小比例。
flex-shrink默認值為1， 當所有子元素都為默認值時，則空間不足時子元素會同比例縮小。
如果其中某個子元素的flex-shrink值為0，則空間不足時該子元素並不會縮小。
如果其中某個子元素的flex-shrink值為2時，則空間不足時該子元素會以二倍速度縮小。
.item {flex-shrink: <number>;}
注： flex-shrink不接受負值。
總結
- 剩余空間 = 父容器空間－子容器1.flex-basis/width - 子容器2.flex-basis/width - …
- 如果父容器空間不夠，就走壓縮 flex-shrink，否則走擴張 flex-grow;
- 如果你希望某個容器在任何時候都不被壓縮，那設置 flex-shrink: 0;
- 如果子容器的 flex-basis 設置為 0(width 也可以，不過 flex-basis 更符合語義)，那么計算剩余空間的時候將不會為子容器預留空間。
- 如果子容器的 flex-basis 設置為 auto(width 也可以，不過 flex-basis 更符合語義)，那么計算剩余空間的時候將會根據子容器內容的多少來預留空間。