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