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

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

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

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

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

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

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

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

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

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

CSS設(shè)置為：

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

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

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

是不是很方便？

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

flex-direction
當(dāng)我們不想沿著默認(rèn)的方向分房子的時(shí)候，我們可以改變flex-direction屬性的值來改變主軸和方向，該屬性默認(rèn)的取值為row；

顧名思義，這會(huì)讓伸縮項(xiàng)的排列方向反過來：

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論