- 相關(guān)推薦
css3的Flexible Boxes詳細使用教程
Flexible Box是什么？Flexible意為可伸縮的，Box意為盒子，可以理解為一種新式的盒模型——伸縮盒模型。由CSS3規范提出，這是在原有的大家非常熟悉的block, inline-block, inline的基礎上延伸出的新一代布局模式。
瀏覽器兼容性
作為非�，F實(shí)的開(kāi)發(fā)者，是否對一個(gè)新技術(shù)進(jìn)行關(guān)注，首先要考慮它的瀏覽器兼容性如何。我們的伸縮盒模型的瀏覽器兼容性看起來(lái)還是相當不錯的。
可以看到，現代瀏覽器基本上都支持了，IE10開(kāi)始也支持了（IE和Safari分別加-ms-和-webkit-前綴即可），移動(dòng)端的支持情況也比較良好，唯一不支持的平臺只有Opera了，咱不帶他玩→_→
伸縮盒基本概念
伸縮盒的最大特點(diǎn)或者說(shuō)優(yōu)點(diǎn)就在于它考慮到了現今高昂的房?jì)r(jià)和人民日益增長(cháng)的住宅需求之間的矛盾，房屋面積是有限的，但是我們的伸縮盒能夠最合理最高效地把房子分給大家。面積多了，就給大家伙多分點(diǎn)；面積小了，就讓各位擠一擠少分點(diǎn)，總而言之不會(huì )讓任何一個(gè)人露宿街頭的（overflow）！
既然我們提到了房子和住戶(hù)的關(guān)系，那么住戶(hù)的排列自然需要沿一定的方向。對于塊級元素來(lái)說(shuō)，布局的延伸方向是自上而下的，也就是縱向。而對于行內元素來(lái)說(shuō)，布局延伸方向是自左往右的，也就是橫向。而伸縮盒呢，它的方向是可變的，既能縱向延伸，也能橫向舒展，這取決于你的設置了。
伸縮盒模型基本術(shù)語(yǔ)
伸縮盒模型的思想和普通的塊級元素和行內元素的布局思想有較大的不同，它引入了一些新的概念和術(shù)語(yǔ)，通過(guò)下面這張圖來(lái)了解一下：
Flex container 伸縮盒容器
這就是用來(lái)分的房子，這是一間神奇的房子，要讓它變得神奇，將display屬性聲明為flex或inline-flex即可~
Flex item 伸縮項
房子里的居民，他們都會(huì )占有自己應得的住房面積。
為了形象說(shuō)明，我們用代碼來(lái)解釋。
XML/HTML Code復制內容到剪貼板item1item2item3
CSS設置為：
CSS Code復制內容到剪貼板 .container{ display:flex; width:300px; height:100px; ... }
在這里display: inline-flex;好像也可以。
對于其中的伸縮項元素，我們需要給他們事先安排好住房面積比例，我們就用最簡(jiǎn)單最健康的1:1:1吧~我們將比例聲明在flex屬性里
CSS Code復制內容到剪貼板 .item-1{ flex:1; ... } .item-2{ flex:1; ... } .item-3{ flex:1; ... }
我們的大房子被完美地平分成三個(gè)隔間了，三家平分房租！
如果有人想住大點(diǎn)的房子，我們直接改變flex的比例即可：
CSS Code復制內容到剪貼板 .item-1{ flex:1; ... } .item-2{ flex:1; ... } .item-3{ flex:2; ... }
是不是很方便？
Axes 軸
我們可以看到，圖中有兩條軸，分別標注了主軸和次軸（垂直于主軸）。然而實(shí)際上哪一條是主軸并不確定，是由我們來(lái)規定的。
1. flex-direction 此屬性規定哪條軸為主軸。
2. justify-content 此屬性設置了伸縮項在主軸方向上的排列方式，這個(gè)稍后解釋。
3. align-items 此屬性和上面的justify-content相對，表示伸縮項在次軸上的排列方式。
4. align-self 此屬性規定某一個(gè)特定的伸縮項元素在次軸上的布局方式，在某個(gè)元素上設置該屬性會(huì )覆蓋它的align-items屬性。也就是這個(gè)屬性會(huì )讓某個(gè)元素更有個(gè)性，不走尋常路~
flex-direction
當我們不想沿著(zhù)默認的方向分房子的時(shí)候，我們可以改變flex-direction屬性的值來(lái)改變主軸和方向，該屬性默認的取值為row；
CSS Code復制內容到剪貼板 .container{ flex:row-reverse; ... }
顧名思義，這會(huì )讓伸縮項的排列方向反過(guò)來(lái)：
當此屬性設置為column時(shí)，主次軸就會(huì )對調，元素的排列方向也會(huì )隨之改變：
CSS Code復制內容到剪貼板 .container{ flex-direction:column; ... }
至于flex: column-reverse的含義就不用我多說(shuō)了吧~
justify-contents
有的時(shí)候，大家挨著(zhù)住，一點(diǎn)空隙都沒(méi)有也會(huì )很難受，連個(gè)過(guò)道都沒(méi)有，隱私也不能保證對吧。這個(gè)時(shí)候，我們可以改變分配政策了，不再按比例分配，而是定額分配，每個(gè)人的面積是確定的。多出的房屋面積改成公共區域。
CSS Code復制內容到剪貼板 .item{ width:80px; ... } ...
設定了width屬性后也要記得去掉flex屬性的聲明哦，不然flex屬性的效果仍然會(huì )把width覆蓋掉~(yú)
同時(shí)，如果width屬性也不設定的話(huà)，元素寬度會(huì )表現為內容的寬度，which means 當伸縮項內部無(wú)內容時(shí)，將不會(huì )進(jìn)行渲染，其表現就和display: none;一樣。
這時(shí)，在容器上聲明justify-content屬性就可以安排伸縮項的位置了：
CSS Code復制內容到剪貼板 .content{ justify-content:flex-start|flex-end|center|space-between|space-around; }
align-items
這項屬性會(huì )改變次軸上元素排列的方式，對于本例來(lái)說(shuō)原來(lái)次軸方向上元素的高度是表現為height: 100%;的，設定了align-items屬性后，其高度表現就會(huì )發(fā)生改變了。
CSS Code復制內容到剪貼板 .content{ align-items:flex-start|flex-end|center|baselinebaseline|stretch; }
說(shuō)到這里了，伸縮項具體的表現其實(shí)可以想象出來(lái)了，想象不出來(lái)的就自己動(dòng)手試一試吧~
order
在伸縮項上聲明此屬性，可以無(wú)視HTML結構的順序而按照order從小到大的順序沿flex-direction方向排列。比如：
CSS Code復制內容到剪貼板 .item-1{ order:3; ... } .item-2{ order:1; ... } .item-3{ order:2; ... }
flex-wrap
此屬性的默認值為nowrap，也就是忽略伸縮項的寬度，管你要多少住房面積，通通按照f(shuō)lex屬性說(shuō)好的分配，不許換行。
CSS Code復制內容到剪貼板 .container{ flex-wrap:nowrap|wrap|wrap-reverse } .item{ width:150px; }
flex-grow，flex-shrink 和 flex-basis
上文提到的flex屬性實(shí)際上是這三個(gè)屬性的簡(jiǎn)寫(xiě)形式。這三個(gè)屬性有相似性，都是表示項與項之間分配空間的相對比例關(guān)系，不同之處在于：
1. flex-grow屬性：屬性值為該伸縮項所占空間相對于其他伸縮項（聲明了flex相關(guān)屬性的項）的比值。
2. flex-shrink屬性：該伸縮項相對于其他伸縮項縮小的比值，也就是說(shuō)當flex-shrink: 3;時(shí)，該項所占空間為其他項的1/3。
3. flex-basis屬性：屬性值為該項所占空間占容器空間的百分比。
注意：對于flex-basis屬性，當所有項的屬性值相加<=100%時(shí)，會(huì )嚴格按照百分比值來(lái)渲染。當屬性值相加>100%時(shí)，元素并不會(huì )溢出，而是表現為兩兩之間所占空間大小遵循相互的百分比比值。也就是說(shuō)當存在三個(gè)伸縮項且flex-basis值都為50%時(shí)，表現行為與三個(gè)項均為flex: 1;一樣。
Flexible Boxes布局模式在響應式開(kāi)發(fā)中尤其好用，對不同的終端，設置元素之間的空間分配關(guān)系將會(huì )變成一件非常簡(jiǎn)單的事。伸縮盒布局和響應式布局中流行的流體布局哪種更好，還是可以結合起來(lái)，就看各位開(kāi)發(fā)者發(fā)揮自己的聰明才智了！
【css3的Flexible Boxes詳細使用教程】相關(guān)文章：
Photoshop調色詳細教程05-30
日式壽司詳細教程09-02
Excel啟用宏的詳細教程05-07
PPT文字輸入詳細教程08-14
關(guān)于美甲的詳細教程07-12
CAD打印的基本設置詳細教程01-23
CAD合并命令的使用教程09-17
CAD縮放命令的使用教程09-16
韓國泡菜炒飯詳細做法教程08-23