使用CSS3中的一个box-flex属性就可以随着浏览器窗口的改变而自适应。 弹性盒布局是在盒布局的基础上进行自适应。 弹性盒布局兼容性：
-webkit-box-flex:1; （Safara浏览器、Chrome浏览器） -moz-box-flex:1;（Firefox浏览器）数字1 是指所占的比例份数。（比如第一个div1盒子是数字1，第二个div2盒子是数字3.那么总共是4份，div1占一份，div2占3份。）
html ：
<body> <div class="box"> <div class="left"> <ul> <li><a href="#"></a>列表列表</li> <li><a href="#"></a>列表列表</li> <li><a href="#"></a>列表列表</li> <li><a href="#"></a>列表列表</li> <li><a href="#"></a>列表列表</li> </ul> </div> <div class="cen">中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应中间内容：flex弹性盒布局，随浏览器窗口大小的改变而自适应</div> <div class="right"> <ul> <li><a href="#"></a>列表列表</li> <li><a href="#"></a>列表列表</li> <li><a href="#"></a>列表列表</li> <li><a href="#"></a>列表列表</li> </ul> </div> </div> </body>CSS：
<style> body {margin: 0;padding: 0;} .box { display: -webkit-box; /*给大盒子添加盒布局兼容性*/ display: -moz-box; /*给大盒子添加盒布局兼容性*/ -webkit-box-orient:horizontal;/*水平方向排列*/ -moz-box-orient:horizontal; } div.left { width: 300px; padding: 10px; background-color: #eee; -webkit-box-ordinal-group:1;/*显示顺序*/ -moz-box-ordinal-group:1; } div.cen { width: 400px; padding: 10px; background-color: pink; -webkit-box-flex:1; /*让谁随着浏览器改变就给谁添加，数字是进行等比分，然后占的份数*/ -moz-box-flex:1; /*让谁随着浏览器改变就给谁添加，数字是进行等比分，然后占的份数*/ -webkit-box-ordinal-group:2; /*显示顺序*/ -moz-box-ordinal-group:2; } div.right { width: 300px; padding: 10px; background-color: #eee; -webkit-box-ordinal-group:3; /*显示顺序*/ -moz-box-ordinal-group:3; } </style>解析： -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; 是显示顺序。
-webkit-box-orient:horizontal; -moz-box-orient:horizontal; 是改变元素排列方向：horizontal是在水平行中从左到右排列子元素，vertical是从上到下垂直方向排列子元素。
-webkit-box-ordinal-group:3; /显示顺序/ -moz-box-ordinal-group:3; 是盒子显示顺序。
使用盒布局，就解决了盒子的浮动及底边对齐问题。 使用弹性盒布局可以对浏览器窗口自适应。
