左右兩側按1:1自適應,中間固定寬度500px

// CSS
/* 首先定義 container ，關注display  */
/* webkit 是Chrome、Safari 的瀏覽器前綴 */
.container{margin: auto;display: -webkit-box;width: 80%；height: 200px;
}
/* 開始定義左、中、右 */
.left { -webkit-box-flex: 1; border: 1px dashed black;}
.main {width: 500px; border: 1px dashed black;}
.right {-webkit-box-flex: 1; border: 1px dashed black;}// HTML
<div class="container"><div class="left"></div><div class="main"></div><div class="right"></div>
</div>

很多時候,瀏覽器可能不支持彈性盒子(如:Opera 和 IE 9及之前版本).我們可以編寫兼容性代碼如下:

.father{display: -webkit-box;    /* Chrome 和 Safari */display: -o-box;         /* Opera */display: -moz-box;       /* FireFox */display: -ms-box;        /*  IE */display: box;
}
.son_content{-webkit-box-flex: 4; -o-box-flex: 4;-moz-box-flex: 4;-ms-box-flex: 4;box-flex: 4;
}

我們希望,布局能縱向布局,代碼如下: (ps:只用改變container,慢慢體會)

// CSS
.container{margin: 30px;display: -web-box;-moz-box-orient: block-axis;-webkit-box-orient: block-axis;-o-box-orient: block-axis;box-orient: block-axis;width: 800px;heigth: 500px;
}

效果如下:

參考《CSS高效開發實戰》 P105~P108