Flexible Box是什么？Flexible意為可伸縮的，Box意為盒子，可以理解為一種新式的盒模型——伸縮盒模型。由CSS3規(guī)范提出，這是在原有的大家非常熟悉的block, inline-block, inline的基礎(chǔ)上延伸出的新一代布局模式。
瀏覽器兼容性

作為非?，F(xiàn)實的開發(fā)者，是否對一個新技術(shù)進行關(guān)注，首先要考慮它的瀏覽器兼容性如何。我們的伸縮盒模型的瀏覽器兼容性看起來還是相當不錯的。

可以看到，現(xiàn)代瀏覽器基本上都支持了，IE10開始也支持了（IE和Safari分別加-ms-和-webkit-前綴即可），移動端的支持情況也比較良好，唯一不支持的平臺只有Opera了，咱不帶他玩→_→

因此，奧巴馬同志說：伸縮盒模型是好的，有前途的。（嗯嗯~）
伸縮盒基本概念

伸縮盒的最大特點或者說優(yōu)點就在于它考慮到了現(xiàn)今高昂的房價和人民日益增長的住宅需求之間的矛盾，房屋面積是有限的，但是我們的伸縮盒能夠最合理最高效地把房子分給大家。面積多了，就給大家伙多分點；面積小了，就讓各位擠一擠少分點，總而言之不會讓任何一個人露宿街頭的（overflow）！

既然我們提到了房子和住戶的關(guān)系，那么住戶的排列自然需要沿一定的方向。對于塊級元素來說，布局的延伸方向是自上而下的，也就是縱向。而對于行內(nèi)元素來說，布局延伸方向是自左往右的，也就是橫向。而伸縮盒呢，它的方向是可變的，既能縱向延伸，也能橫向舒展，這取決于你的設(shè)置了。
伸縮盒模型基本術(shù)語

伸縮盒模型的思想和普通的塊級元素和行內(nèi)元素的布局思想有較大的不同，它引入了一些新的概念和術(shù)語，通過下面這張圖來了解一下：

Flex container 伸縮盒容器
這就是用來分的房子，這是一間神奇的房子，要讓它變得神奇，將display屬性聲明為flex或inline-flex即可~

Flex item 伸縮項
房子里的居民，他們都會占有自己應(yīng)得的住房面積。

為了形象說明，我們用代碼來解釋。

CSS設(shè)置為：

在這里display: inline-flex;好像也可以。
對于其中的伸縮項元素，我們需要給他們事先安排好住房面積比例，我們就用最簡單最健康的1:1:1吧~我們將比例聲明在flex屬性里

我們的大房子被完美地平分成三個隔間了，三家平分房租！

如果有人想住大點的房子，我們直接改變flex的比例即可：

是不是很方便？

Axes 軸
我們可以看到，圖中有兩條軸，分別標注了主軸和次軸（垂直于主軸）。然而實際上哪一條是主軸并不確定，是由我們來規(guī)定的。
1. flex-direction 此屬性規(guī)定哪條軸為主軸。
2. justify-content 此屬性設(shè)置了伸縮項在主軸方向上的排列方式，這個稍后解釋。
3. align-items 此屬性和上面的justify-content相對，表示伸縮項在次軸上的排列方式。
4. align-self 此屬性規(guī)定某一個特定的伸縮項元素在次軸上的布局方式，在某個元素上設(shè)置該屬性會覆蓋它的align-items屬性。也就是這個屬性會讓某個元素更有個性，不走尋常路~

flex-direction
當我們不想沿著默認的方向分房子的時候，我們可以改變flex-direction屬性的值來改變主軸和方向，該屬性默認的取值為row；

顧名思義，這會讓伸縮項的排列方向反過來：

當此屬性設(shè)置為column時，主次軸就會對調(diào)，元素的排列方向也會隨之改變：

至于flex: column-reverse的含義就不用我多說了吧~

justify-contents
有的時候，大家挨著住，一點空隙都沒有也會很難受，連個過道都沒有，隱私也不能保證對吧。這個時候，我們可以改變分配政策了，不再按比例分配，而是定額分配，每個人的面積是確定的。多出的房屋面積改成公共區(qū)域。

設(shè)定了width屬性后也要記得去掉flex屬性的聲明哦，不然flex屬性的效果仍然會把width覆蓋掉~
同時，如果width屬性也不設(shè)定的話，元素寬度會表現(xiàn)為內(nèi)容的寬度，which means 當伸縮項內(nèi)部無內(nèi)容時，將不會進行渲染，其表現(xiàn)就和display: none;一樣。
這時，在容器上聲明justify-content屬性就可以安排伸縮項的位置了：

align-items
這項屬性會改變次軸上元素排列的方式，對于本例來說原來次軸方向上元素的高度是表現(xiàn)為height: 100%;的，設(shè)定了align-items屬性后，其高度表現(xiàn)就會發(fā)生改變了。

說到這里了，伸縮項具體的表現(xiàn)其實可以想象出來了，想象不出來的就自己動手試一試吧~

order
在伸縮項上聲明此屬性，可以無視HTML結(jié)構(gòu)的順序而按照order從小到大的順序沿flex-direction方向排列。比如：

flex-wrap
此屬性的默認值為nowrap，也就是忽略伸縮項的寬度，管你要多少住房面積，通通按照flex屬性說好的分配，不許換行。

flex-grow，flex-shrink 和 flex-basis
上文提到的flex屬性實際上是這三個屬性的簡寫形式。這三個屬性有相似性，都是表示項與項之間分配空間的相對比例關(guān)系，不同之處在于：
1. flex-grow屬性：屬性值為該伸縮項所占空間相對于其他伸縮項（聲明了flex相關(guān)屬性的項）的比值。
2. flex-shrink屬性：該伸縮項相對于其他伸縮項縮小的比值，也就是說當flex-shrink: 3;時，該項所占空間為其他項的1/3。
3. flex-basis屬性：屬性值為該項所占空間占容器空間的百分比。

注意：對于flex-basis屬性，當所有項的屬性值相加<=100%時，會嚴格按照百分比值來渲染。當屬性值相加>100%時，元素并不會溢出，而是表現(xiàn)為兩兩之間所占空間大小遵循相互的百分比比值。也就是說當存在三個伸縮項且flex-basis值都為50%時，表現(xiàn)行為與三個項均為flex: 1;一樣。

Flexible Boxes布局模式在響應(yīng)式開發(fā)中尤其好用，對不同的終端，設(shè)置元素之間的空間分配關(guān)系將會變成一件非常簡單的事。伸縮盒布局和響應(yīng)式布局中流行的流體布局哪種更好，還是可以結(jié)合起來，就看各位開發(fā)者發(fā)揮自己的聰明才智了！

最新評論