CSS 3布局體驗(yàn)：靈活的盒子模型
CSS 3為開(kāi)發(fā)人員帶來(lái)了很多期待已久的炫目功能，同時(shí)在CSS 2的基礎(chǔ)中，它也增加了一些新的盒子模型參數(shù)。通過(guò)學(xué)習(xí)和測(cè)試，可以發(fā)現(xiàn)這種新的盒子模型布局對(duì)建立自適應(yīng)布局的頁(yè)面帶來(lái)很大的好處。在這篇文章中，所有例子都基于以下HTML代碼：
51CTO相關(guān)文章推薦：定義未來(lái)Web樣式 CSS 3最新特性一覽 CSS 3備受期待的8大功能
- <body>
- <dividdivid="box1">1</div>
- <dividdivid="box2">2</div>
- <dividdivid="box3">3</div>
- </body>
容器的排列
在通常的情況下，頁(yè)面上所有容器的順序都按照載入的順序排列。而使用CSS 3提供的功能后，我們可以在不改變HTML結(jié)構(gòu)的前提下隨意改變?nèi)萜黠@示的位置，這樣不但給排版帶來(lái)極大的方便，我們也可以利用這些功能進(jìn)行流量整形。在需用使用靈活盒子模型(FlexibleBoxModule)的時(shí)候，我們需要先把其父容器的Display屬性設(shè)置為box或者inline-box。
水平分布和垂直分布
我們可以通過(guò)box-orient屬性指定容器的分布軸，當(dāng)這個(gè)屬性的值為vertical時(shí)其子容器將垂直分布（也可以為block-axis），當(dāng)值為horizontal時(shí)其子容器講水平分布（也可以為inline-axis）。在本文的第一個(gè)例子里我們使用以下的CSS：
- #exemple1.content{
- -moz-box-orient:horizontal;
- -webkit-box-orient:horizontal;
- box-orient:horizontal;
- }
- #exemple1.boite{
- -moz-box-flex:1;
- -webkit-box-flex:1;
- box-flex:1;
- }
具體的效果可以看這個(gè)DEMO，三個(gè)子Div容器都橫向并列了。
注：這個(gè)效果在CSS 2里理論上也可以通過(guò)Display:inline;實(shí)現(xiàn)，但由于某些瀏覽器的BUG，沒(méi)人會(huì)這樣做。
反序排列
box-direction屬性可以讓我們隨意改變?nèi)萜鞯娘@示順序。我們知道，在默認(rèn)的情況下，block級(jí)元素是按照加載順序從上到下排列，inline級(jí)元素是從左到右排列的，但現(xiàn)在通過(guò)box-direction屬性我們可以讓最后加載的block級(jí)元素顯示在最頂部，最后加載的inline級(jí)元素顯示在左邊。
但在使用這個(gè)屬性的時(shí)候要注意它可能會(huì)改變?cè)氐哪承傩?，產(chǎn)生一些不能控制的效果。在第二個(gè)例子里，我們使用以下的CSS：
- #exemple2.content{
- -moz-box-orient:vertical;
- -moz-box-direction:reverse;
- -webkit-box-orient:vertical;
- -webkit-box-direction:reverse;
- box-orient:vertical;
- box-direction:reverse;
- }
- #exemple2.boite{
- -moz-box-flex:1;
- -webkit-box-flex:1;
- box-flex:1;
- }
效果大家可以看這個(gè)DEMO?？梢园l(fā)現(xiàn)，在不改變HTML結(jié)構(gòu)的情況下，容器的排列順序改變了。
按指定順序排列
我們不但可以讓一組同級(jí)容器反序排列，而且還可以讓它們按自己喜歡的順序排列，box-ordinal-group屬性可以幫我們做到這一點(diǎn)。通過(guò)box-ordinal-group為各個(gè)容器指定一個(gè)序號(hào)，默認(rèn)情況下他們將會(huì)按照序號(hào)遞增的順序排列。要注意的是：沒(méi)有指定序號(hào)的容器默認(rèn)都為1，并且序號(hào)相同的元素將按照加載順序排列。大家可以看一下下面的CSS：
- #exemple3.content{
- -moz-box-orient:vertical;
- -moz-box-direction:reverse;
- -webkit-box-orient:vertical;
- -webkit-box-direction:reverse;
- box-orient:vertical;
- box-direction:reverse;
- }
- #exemple3.boite{
- -moz-box-flex:1;
- -webkit-box-flex:1;
- box-flex:1;
- }
- #exemple3.v1{
- -moz-box-ordinal-group:2;
- -webkit-box-ordinal-group:2;
- box-ordinal-group:2;
- }
- #exemple3.v2{
- -moz-box-ordinal-group:2;
- -webkit-box-ordinal-group:2;
- box-ordinal-group:2;
- }
- #exemple3.v3{
- -moz-box-ordinal-group:1;
- -webkit-box-ordinal-group:1;
- box-ordinal-group:1;
- }
在上面的CSS里，我把第一和第二個(gè)容器的序號(hào)都定為2，第三個(gè)容器序號(hào)為1，因此最終效果應(yīng)該是v3排在第一，v1和v2則根據(jù)加載順序，v1排在v2前面。效果可以看這個(gè)DEMO。
后記
CSS 3真的非常強(qiáng)大，我相信在它普及以后，我們做網(wǎng)頁(yè)的時(shí)候?qū)⒖梢詼p少大量的JavaScript。
文章轉(zhuǎn)自Bolo的博客，
原文地址：http://blog.imbolo.com/the-css3-flexible-box-model/
【編輯推薦】
- 定義未來(lái)Web樣式 CSS 3最新特性一覽
- 揭秘HTML 5和CSS3 Web實(shí)現(xiàn)飛躍的踏板
- 檢測(cè)瀏覽器是否支持CSS3的方法
- CSS 3中的炫目新功能搶先預(yù)覽
- CSS 3備受期待的8大功能
