使用css3中的乙個box-flex屬性就可以隨著瀏覽器視窗的改變而自適應。
彈性盒布局是在盒布局的基礎上進行自適應。
彈性盒布局相容性：
-webkit
-box
-flex:1; （safara瀏覽器、chrome瀏覽器）
-moz
-box
-flex:1;（firefox瀏覽器）
html ：
class="box">
class="left">
href="#">
a>列表列表li>
href="#">
a>列表列表li>
href="#">
a>列表列表li>
href="#">
a>列表列表li>
href="#">
a>列表列表li>
ul>
div>
class="cen">中間內容：flex彈性盒布局，隨瀏覽器視窗大小的改變而自適應中間內容：flex彈性盒布局，隨瀏覽器視窗大小的改變而自適應中間內容：flex彈性盒布局，隨瀏覽器視窗大小的改變而自適應中間內容：flex彈性盒布局，隨瀏覽器視窗大小的改變而自適應中間內容：flex彈性盒布局，隨瀏覽器視窗大小的改變而自適應中間內視窗大小的改變而自適應中間內容：flex彈性盒布局，隨瀏覽器視窗大小的改變而自適應中間內容：flex彈性盒布局，隨瀏覽器視窗大小的改變而自適應中間內容：flex彈性盒布局，隨瀏覽器視窗大小的改變而自適應div>
class="right">
href="#">
a>列表列表li>
href="#">
a>列表列表li>
href="#">
a>列表列表li>
href="#">
a>列表列表li>
ul>
div>
div>
body>css：
.box
div.left
div.cen
div.right
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;
是盒子顯示順序。
使用盒布局，就解決了盒子的浮動及底邊對齊問題。
使用彈性盒布局可以對瀏覽器視窗自適應。
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。1 2 335 36 37 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。38 示...
CSS3,彈性盒Flex布局
2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。使用css3屬性必然會存在瀏覽器相容性讓我們看看哪些瀏覽器支援flex 瀏覽器相容性 一 flex布局是什麼？flex是flexi...