我對Flexbox布局模式的理解

01-26

又是一篇「吃老本」的文章。

Flexbox，一種CSS3的布局模式，也叫做彈性盒子模型，用來為盒裝模型提供最大的靈活性。

首先舉一個栗子，之前我們是這樣實現一個div盒子水平垂直居中的。在知道對象高寬的情況下，對居中元素絕對百分比定位，然後通過margin偏移的方式來實現。

<style> .container{ width: 600px; height: 400px; border: 1px solid #000; position: relative; } .box{ width: 200px; height: 100px; border: 1px solid #000; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top:-50px; }</style><div class="container"> <div class="box"></div></div>

假如使用了flex後，實現起來就簡單了，而且不需要自己去算，也不需要絕對定位，只需要通過對伸縮容器定義兩個屬性，justify-content定義伸縮項目沿著主軸線的對齊方式為center， align-items定義伸縮項目在側軸（垂直於主軸）的對齊方式為center，具體如下：

<style> .container{ width: 600px; height: 400px; border: 1px solid #000; display: flex; justify-content:center; align-items:center; } .box{ width: 200px; //寬度可以為任意 height: 100px; //高度可以為任意 border: 1px solid #000; }</style><div class="container"> <div class="box"></div></div>

其實Flexbox的優秀特性並不是這一些，首先來一張它的屬性圖吧~

首先我們來分析下這一張圖，從第一個子節點可以看到Flexbox由Flex容器和Flex項目組成，容器即父元素，項目即子元素。他們之間的一些關係可以這樣來表示：

這張圖可以在接下來的屬性分析中用到。

Flex容器

display:flex

[flex]當我們使用Flexbox布局時候，需要先給父容器的display值定位flex（塊級）或者inline-flex（行內級）。

當使用了這個值以後，伸縮容器會為內容建立新的伸縮格式化上下文（FFC），它的上下文展示效果和BFC根元素相同（BFC特性：浮動不會闖入伸縮容器，且伸縮容器的邊界不會與其內容邊界疊加）。

伸縮容器不是塊容器，因此有些設計用來控制塊布局的屬性，在伸縮布局中不適用，特別是多欄（column)，float，clear，vertical-align這些屬性。

flex-direction

[flex-direction]屬性用來控制上圖中伸縮容器中主軸的方向，同時也決定了伸縮項目的方向。

flex-direction:row;也是默認值，即主軸的方向和正常的方向一樣，從左到右排列。
flex-direction:row-reverse;和row的方向相反，從右到左排列。
flex-direction:column;從上到下排列。
flex-direction:column-reverse;從下到上排列。以上只針對ltr書寫方式，對於rtl正好相反了。

網頁展示效果如下：

flex-warp

[flex-wrap]屬性控制伸縮容器是單行還是多行，也決定了側軸方向（新的一行的堆放方向）。

flex-wrap:nowrap;伸縮容器單行顯示，默認值；
flex-wrap:wrap;伸縮容器多行顯示；伸縮項目每一行的排列順序由上到下依次。
flex-wrap:wrap-reverse;伸縮容器多行顯示，但是伸縮項目每一行的排列順序由下到上依次排列。

網頁效果見圖:

flex-flow

[flex-flow]屬性為flex-direction（主軸方向）和flex-wrap（側軸方向）的縮寫，兩個屬性決定了伸縮容器的主軸與側軸。

flex-flow:flex-direction;默認值為row nowrap；

舉兩個栗子：

flex-flow:row;也是默認值；主軸是行內方向，單行顯示，不換行；
flex-flow:row-reverse wrap;主軸和行內方向相反，從右到左，項目每一行由上到下排列（側軸）。

網頁效果如下：

這裡大家可以多自己去試試不同的組合。

justify-content

[justify-content]用於定義伸縮項目在主軸上面的的對齊方式，當一行上的所有伸縮項目都不能伸縮或可伸縮但是已經達到其最大長度時，這一屬性才會對多餘的空間進行分配。當項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。

justify-content:flex-start;伸縮項目向主軸的起始位置開始對齊，後面的每元素緊挨著前一個元素對齊。
justify-content:flex-end;伸縮項目向主軸的結束位置對齊，前面的每一個元素緊挨著後一個元素對齊。
justify-content:center;伸縮項目相互對齊並在主軸上面處於居中，並且第一個元素到主軸起點的距離等於最後一個元素到主軸終點的位置。以上3中都是「捆綁」在一個分別靠左、靠右、居中對齊。
justify-content:space-between;伸縮項目平均的分配在主軸上面，並且第一個元素和主軸的起點緊挨，最後一個元素和主軸上終點緊挨，中間剩下的伸縮項目在確保兩兩間隔相等的情況下進行平分。
justify-content:space-around;伸縮項目平均的分布在主軸上面，並且第一個元素到主軸起點距離和最後一個元素到主軸終點的距離相等，且等於中間元素兩兩的間距的一半。完美的平均分配，這個布局在阿里系中很常見。

還是看demo理解起來快一點：

align-items

[align-items]用來定義伸縮項目在側軸的對齊方式，這類似於[justify-content]屬性，但是是另一個方向。（flex-directon和flex-wrap是一對，justify-content和align-items是一對，前者分別定義主軸和側軸的方向，後者分別定義主軸和側軸中項目的對齊方式）。

align-items:flex-start;伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起點的邊。
align-items:flex-end;伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊。
align-items:center;伸縮項目的外邊距在側軸上居中放置。
align-items:baseline;如果伸縮項目的行內軸與側軸為同一條，則該值與[flex-start]等效。其它情況下，該值將參與基線對齊。
align-items:stretch;伸縮項目拉伸填充整個伸縮容器。此值會使項目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下儘可能接近所在行的尺寸。

下面demo只展示center和stretch的栗子，其他幾個可以參考flex-start和flex-end那樣。

align-content

[align-content]屬性可以用來調準伸縮行在伸縮容器里的對齊方式，這與調準伸縮項目在主軸上對齊方式的[justify-content]屬性類似。只不過這裡元素是以一行為單位。請注意本屬性在只有一行的伸縮容器上沒有效果。當使用flex-wrap:wrap時候多行效果就出來了。

align-content: flex-start || flex-end || center || space-between || space-around || stretch;

align-content: stretch;默認值,各行將會伸展以佔用剩餘的空間。
其他可以參考[justify-content]用法。

具體圖片來至http://w3.org官方文檔；

太麻煩。寫不下去了，摔。

Flex項目

終於寫到關於伸縮項目的相關屬性了，主要是3個，order，flex（flex-grow，flex-shrink，flex-basis的組合）和 align-self。用來比較多的是前兩個。

order

order控制伸縮項目在伸縮容器中的顯示順序，伸縮容器中伸縮項目從序號最小的開始布局，默認值是0。

有一種用法比較多，想設置一組中有兩個元素一個排第一，另外一個排最後，主需要將第一個的order:-1；另一個為order:0;這樣就好了。

譬如我們想控制一個container中有4個box，想box4為一個顯示，box1為最後一個顯示。只需要這樣

<style>.container{ display: flex; } .box1{ order:1; } .box4{ order:-1; }</style><div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div></div>

顯示效果就這樣了：

flex

[flex]屬性可以用來指定可伸縮長度的部件，是flex-grow（擴展比例）,flow-shrink（收縮比例）,flex-basis（伸縮基準值）這個三個屬性的縮寫寫法，建議大家採用縮寫的方式而不是單獨來使用這3個屬性。

flex:none | [ <flex-grow> ?<flew-shrink> || <flow-basis>]// flex-grow是必須得flex-shrink和flow-basis是可選的

flex-grow:<number>;其中number作為擴展比例，沒有單位，初始值是0，主要用來決定伸縮容器剩餘空間按比例應擴展多少空間。
flex-grow:<number>;其中number作為收縮比例，沒有單位，初始值是1，也就是剩餘空間是負值的時候此伸縮項目相對於伸縮容器里其他伸縮項目能收縮的空間比例，在收縮的時候收縮比率會以[flex-basis]伸縮基準值加權。
flex-basis:<length>|auto;默認是auto也就是根據可伸縮比率計算出剩餘空間的分布之前，伸縮項目主軸長度的起始數值。若在「flex」縮寫省略了此部件，則「flex-basis」的指定值是長度零。

flex-basis用圖來表示就是這樣：

align-self

[align-self]用來在單獨的伸縮項目上覆寫默認的對齊方式，這個屬性是用來覆蓋伸縮容器屬性align-items對每一行的對齊方式。也就是說在默認的情況下這兩個值是相等的。

我的看法

講了這麼多他們的使用，我們來看一看flexbox布局的兼容性。

具體大家可以見這個網站：caniuse

在PC端其實很樂觀了，基本上主流的瀏覽器都已經兼容了flex的使用，但是到了移動端就不是那麼好了，特別是國內瀏覽器，考慮到uc瀏覽器佔了大頭，但是uc從圖中看到只兼容flex最老的一個版本，也就是2009年的版本，即display:box;很多現在flex的優秀特性到了它上面都不兼容了，所以建議大家在使用的時候，假如2009版本可以滿足開發要求的話，還是去使用2009版本，這樣風險更小。

但是假如想兼容多個瀏覽器，可以採用優雅降級的方式來使用，這裡推薦一個scss的sass-flex-mixin，這樣就可以使用最新的寫法，並且兼容大部分瀏覽器了。

相信flexbox布局在以後的移動端會用得越來越多的。