CSS之flex

CSS之flex

1 flex基礎

flex用於爲容器內的子元素設置佈局。當一個元素的display屬性設置爲flex或inline-flex時，這個元素成爲flex容器，其子元素成爲flex元素。爲flex元素設置佈局很是便捷。但要注意的是，flex元素的float、clear和vertical-align屬性再也不起做用。
 
2 flex容器

爲了便於佈局子元素，flex容器提供了兩個軸用於對齊，分別稱爲主軸和交叉軸。主軸由flex-direction定義。flex-direction有4個可選值：row（默認值）、row-reverse、column、column-reverse，對應的主軸方向依次爲水平向右（起點在左）、水平向左（起點在右）、垂直向下（起點在上）、垂直向上（起點在下）。在主軸方向上，子元素的佈局方式由justify-content定義。justify-content有5個可選值：flex-start（默認值）、flex-end、center、space-between、space-around。其中flex-start表示首個子元素緊鄰主軸起點排列。flex-end表示最後一個子元素緊鄰主軸終點排列。center表示居中排列。space-between表示子元素兩端對其，各子元素間間隔距離相等。space-around表示各子元素兩邊的間隔距離（或子元素和父元素邊框的間隔距離）相等。

若是父元素的寬度沒法容納所有子元素，能夠使用flex-wrap指定換行方式。flex-wrap能夠取值nowrap（默認值）、wrap或wrap-reverse。nowrap表示不換行，所以多出的子元素不會顯示。wrap表示換行，第一行在上方。wrap-reverse表示換行，第一行在下方。

和主軸垂直的直線是交叉軸。子元素在交叉軸上的對齊方式由align-items規定。align-items能夠是flex-start（默認值）、flex-end、center、baseline和stretch。flex-start、flex-end、center這3個值的意義和在justify-content中相似。baseline表示按照子元素的首行文字基線對其。stretch表示在資源素沒有設置高度時，將子元素高度拉伸至充滿父元素。

當主軸方向上發生換行時，在交叉軸方向上會產生多行子元素。這些行之間的排序方式，由align-content規定。align-content的可選值有flex-start（默認值）、flex-end、center、space-between、space-around、stretch。這些值的意義，同以前描述的相似。

除了上述的5個屬性，CSS爲flex容器提供了縮寫flex-flow，語法爲flex: <flex-direction> || <flex-wrap>。

3 flex元素

flex容器規定了所有子元素的佈局方式。若是某個子元素須要單獨的佈局方式，也能夠使用flex屬性。子元素能夠使用的flex屬性有order、align-self、flex-grow、flex-shrink、flex-basis，以及縮寫flex。在主軸方向上，能夠使用order調整元素位置。order（默認值爲0）越小的元素越靠近主軸起點。在交叉軸方向上，能夠使用align-self覆蓋容器的align-items屬性。align-self的可選值同容器的align-items屬性同樣。

若是容器在主軸方向上有剩餘空間，能夠經過flex-grow屬性設定子元素的放大比例。當flex-grow爲0時，子元素不會放大。相似的，能夠經過flex-shrink爲子元素設置縮小比例。和這兩個屬性相關的還有flex-basis。在計算主軸方向上是否有剩餘空間時，子元素的flex-basis值被認爲是子元素佔用的大小。flex-basis默認值是auto，表示子元素的寬度或高度（根據主軸方向決定）。
   

CSS爲flex元素提供了縮寫flex，語法是flex: none || <flex-grow> || <flex-shrink> || <flex-basis>。

4 兼容性

對於webkit內核的容器，須要爲flex增長-webkit-前綴。

5 參考資料

《Flex佈局教程：語法篇》 阮一飛 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 《Flex佈局教程：實例篇》 阮一飛 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html