CSS3 靈活的盒子模型(Flexible Box Module)

CSS3 標準里引入了一些新的盒子模型參數(shù)，在 CSS2 的基礎(chǔ)上，我們將能更靈活地調(diào)整頁面上各個容器的大小和位置。詳細的說明可以看這個文檔。

通過學習和測試，我發(fā)現(xiàn)這種新的盒子模型布局對建立自適應布局的頁面帶來很大的好處。在這篇文章中，我的所有例子都基于以下 HTML代碼：

容器的排列

在通常的情況下，頁面上所有容器的順序都按照載入的順序排列。而使用 CSS3 提供的功能后，我們可以在不改變 HTML 結(jié)構(gòu)的前提下隨意改變?nèi)萜黠@示的位置，這樣不但給排版帶來極大的方便，我們也可以利用這些功能進行流量整形。

在需用使用靈活盒子模型(Flexible Box Module)的時候，我們需要先把其父容器的 Display 屬性設(shè)置為 box 或者 inline-box 。

水平分布和垂直分布

我們可以通過 box-orient 屬性指定容器的分布軸，當這個屬性的值為 vertical 時其子容器將垂直分布（也可以為 block-axis ），當值為 horizontal 時其子容器講水平分布（也可以為 inline-axis ）。在本文的第一個例子里我使用了以下的 CSS ：

具體的效果可以看這個 DEMO ，三個子 Div 容器都橫向并列了。

注：這個效果在 CSS2 里理論上也可以通過 Display: inline; 實現(xiàn)，但由于某些瀏覽器的 BUG ，沒人會這樣做。

反序排列

box-direction 屬性可以讓我們隨意改變?nèi)萜鞯娘@示順序。我們知道，在默認的情況下，block 級元素是按照加載順序從上到下排列， inline 級元素是從左到右排列的，但現(xiàn)在通過 box-direction 屬性我們可以讓最后加載的 block 級元素顯示在最頂部，最后加載的 inline 級元素顯示在左邊。

但在使用這個屬性的時候要注意它可能會改變元素的某些屬性，產(chǎn)生一些不能控制的效果。

在第二個例子里，我使用了以下的 CSS ：

效果大家可以看這個 DEMO。可以發(fā)現(xiàn)，在不改變 HTML 結(jié)構(gòu)的情況下，容器的排列順序改變了。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈