左右兩側按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

總結

以上是生活随笔為你收集整理的css --- 弹性盒子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。