CSS 3布局體驗：靈活的盒子模型
CSS 3為開發人員帶來了很多期待已久的炫目功能，同時在CSS 2的基礎中，它也增加了一些新的盒子模型參數。通過學習和測試，可以發現這種新的盒子模型布局對建立自適應布局的頁面帶來很大的好處。在這篇文章中，所有例子都基于以下HTML代碼：
51CTO相關文章推薦：定義未來Web樣式 CSS 3最新特性一覽 CSS 3備受期待的8大功能
- <body>
- <dividdivid="box1">1</div>
- <dividdivid="box2">2</div>
- <dividdivid="box3">3</div>
- </body>
容器的排列
在通常的情況下，頁面上所有容器的順序都按照載入的順序排列。而使用CSS 3提供的功能后，我們可以在不改變HTML結構的前提下隨意改變容器顯示的位置，這樣不但給排版帶來極大的方便，我們也可以利用這些功能進行流量整形。在需用使用靈活盒子模型(FlexibleBoxModule)的時候，我們需要先把其父容器的Display屬性設置為box或者inline-box。
水平分布和垂直分布
我們可以通過box-orient屬性指定容器的分布軸，當這個屬性的值為vertical時其子容器將垂直分布（也可以為block-axis），當值為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;實現，但由于某些瀏覽器的BUG，沒人會這樣做。
反序排列
box-direction屬性可以讓我們隨意改變容器的顯示順序。我們知道，在默認的情況下，block級元素是按照加載順序從上到下排列，inline級元素是從左到右排列的，但現在通過box-direction屬性我們可以讓最后加載的block級元素顯示在最頂部，最后加載的inline級元素顯示在左邊。
但在使用這個屬性的時候要注意它可能會改變元素的某些屬性，產生一些不能控制的效果。在第二個例子里，我們使用以下的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?？梢园l現，在不改變HTML結構的情況下，容器的排列順序改變了。
按指定順序排列
我們不但可以讓一組同級容器反序排列，而且還可以讓它們按自己喜歡的順序排列，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，因此最終效果應該是v3排在第一，v1和v2則根據加載順序，v1排在v2前面。效果可以看這個DEMO。
后記
CSS 3真的非常強大，我相信在它普及以后，我們做網頁的時候將可以減少大量的JavaScript。
文章轉自Bolo的博客，
原文地址：http://blog.imbolo.com/the-css3-flexible-box-model/
【編輯推薦】
