這是一個常見的頁面布局，Header→Body→Footer，中間Body包含兩到三列，重要內容放置在html靠前位置，優先加載，html代碼如下：
<div class="wrapper">
<header>Header</header>
<article>
<div class="main">Main</div>
<aside class="aside">Aside</aside>
<aside class="sub">Sub</aside>
</article>
<footer>Footer</footer>
</div>
如果使用傳統的CSS來實現，比較麻煩，得使用float，margin負值，但是采用CSS3一個新增屬性——display:box后，一切問題，迎刃而解。我們先看相關文檔（飄零霧雨 CSS3手冊）：
實現的CSS代碼，左右定寬，中間自適應的流式布局，html、css代碼量極少。
header{ height:100px; margin-top: 10px; border: 1px solid #000;}
article{ height:300px; margin-top: 10px;}
footer{ height:50px; margin-top: 10px; border: 1px solid #000;}
article{ display:-webkit-box; display:-moz-box; display:box; width: 100%;}
.aside{ width: 150px; border: 1px solid #f00; -webkit-box-ordinal-group:0; -moz-box-ordinal-group:0; box-ordinal-group:0;}
.main{ -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; box-ordinal-group:1; margin: 0px 10px; border: 1px solid #f00;}
.sub{ width: 200px; border: 1px solid #f00; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2;}
box-flex:<number>,number為任意數字，默認為0。意思為子元素按照父元素剩余空間分配比例，number即為比例數。兩個aside的寬度分別為150px、200px，article剩余空間分配給main，如果article寬設為100%，即為流式布局。
box-ordinal-group:<number>,元素按number值顯示，數值較低的元素顯示在數值較高的元素前面。本來頁面加載順序是【main】→【aside】→【sub】，我們把這3個的box-ordinal-group值分別設為1-0-2，這樣就讓aside在main左邊顯示了。
最后，我們看下傳統做法是怎樣的。
html代碼：
<div class="old_method">
<div class="hd">Header</div>
<div class="bd">
<div class="bd_main">
<div class="main_content">Main</div>
</div>
<div class="bd_side">Side</div>
<div class="bd_sub">Sub</div>
</div>
<div class="ft">Footer</div>
</div>
css代碼：
.old_method{ margin-top: 20px;}
.hd{ height:50px; margin-top: 10px; border: 1px solid #000;}
.bd{ height:300px; margin-top: 10px; }
.ft{ height:50px; margin-top: 10px; border: 1px solid #000;}
.bd{ width: 100%; overflow: hidden;}
.bd_side{ float: left; width: 150px; margin-left: -100%; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #f00; }
.bd_main{ float: left; width: 100%; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #ccc; }
.bd_main .main_content{ margin: 0px 200px 0 150px;}
.bd_sub{ float: left; width: 200px; margin-left: -200px; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #f60;}
通過margin負值把side拉到左邊，sub拉上右邊；margin-bottom: -3000px; padding-bottom: 3000px；使兩邊同高，效果圖如下：
完整代碼如下：
View Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 彈性盒模型</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
header{ height:50px; margin-top: 10px; border: 1px solid #000;}
article{ height:300px; margin-top: 10px; }
footer{ height:50px; margin-top: 10px; border: 1px solid #000;}
article{ display:-webkit-box; display:-moz-box; display:box; width: 100%;}
.aside{ width: 150px; border: 1px solid #f00; -webkit-box-ordinal-group:0; -moz-box-ordinal-group:0; box-ordinal-group:0;}
.main{ -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; box-ordinal-group:1; margin: 0px 10px; border: 1px solid #f00;}
.sub{ width: 200px; border: 1px solid #f00; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2;}
.old_method{ margin-top: 20px;}
.hd{ height:50px; margin-top: 10px; border: 1px solid #000;}
.bd{ height:300px; margin-top: 10px; }
.ft{ height:50px; margin-top: 10px; border: 1px solid #000;}
.bd{ overflow: hidden;}
.bd_side{ float: left; width: 150px; margin-left: -100%; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #f00; }
.bd_main{ float: left; width: 100%; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #ccc; }
.bd_main .main_content{ margin: 0px 200px 0 150px;}
.bd_sub{ float: left; width: 200px; margin-left: -200px; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #f60;}
</style>
</head>
<body>
<div class="wrapper">
<header>Header css3 方法</header>
<article>
<div class="main">Main</div>
<aside class="aside">Aside</aside>
<div class="sub">Sub</div>
</article>
<footer>Footer</footer>
</div>
<div class="old_method">
<div class="hd">Header 不用css3的方法</div>
<div class="bd">
<div class="bd_main"><div class="main_content">Main</div></div>
<div class="bd_side">Side</div>
<div class="bd_sub">Sub</div>
</div>
<div class="ft">Footer</div>
</div>
</body>
</html>