CSS3 彈性盒模型與流式布局

這是乙個常見的頁面布局，header→body→footer，中間body包含兩到三列，重要內容放置在html靠前位置，優先載入，html**如下：

main

aside

sub footer

如果使用傳統的css來實現，比較麻煩，得使用float，margin負值，但是採用css3乙個新增屬性——display:box後，一切問題，迎刃而解。我們先看相關文件（

飄零霧雨 css3手冊

）：實現的css**，左右定寬，中間自適應的流式布局，html、css**量極少。

header article footer article .aside .main .sub

box-flex:,number為任意數字，預設為0。意思為子元素按照父元素剩餘空間分配比例，number即為比例數。兩個aside的寬度分別為150px、200px，article剩餘空間分配給main，如果article寬設為100%，即為流式布局。

box-ordinal-group:,元素按number值顯示，數值較低的元素顯示在數值較高的元素前面。本來頁面載入順序是【main】→【aside】→【sub】，我們把這3個的box-ordinal-group值分別設為1-0-2，這樣就讓aside在main左邊顯示了。

最後，我們看下傳統做法是怎樣的。

html**：

header main side sub footer

css**：

.old_method .hd.bd .ft.bd .bd_side .bd_main .bd_main .main_content .bd_sub

通過margin負值把side拉到左邊，sub拉上右邊；

margin-bottom

:-3000px

;padding-bottom

:3000px

；使兩邊同高，效果圖如下：

完整**如下：

main

aside

sub footer

header 不用css3的方法

main

side

sub footer