自適應布局webkit-box的用法

Flexible Box Model(靈活盒子模型)

在平常的web橫排布局中，會經常用到float或display:inline-block，但是在多種不同寬度的移動設備的自適應布局中用的話，還得設置百分比寬度和考慮清除浮動。而Flexible Box Model可以自動計算寬度和自適應，更加方便。 Flexible Box Model有幾個屬性：

1、box-orient          在父元素上設置   子元素排列 vertical (垂直) or horizontal（水平）

2、box-flex               在子元素上設置   兄弟元素之間比例，僅作一個系數

3、box-align             在父元素上設置    box 排列

4、box-direction    在父元素上設置    box 方向  可設置reverse排序相反

5、box-flex-group  在子元素上設置   以組為單位的流體系數

6、box-ordinal-group    以組為單位的子元素排列方向

7、box-pack              在父元素上設置   可設置center和vertically

 演示效果如圖：

下面是效果圖的html結構：

<div class="main">
　　<div class="div left"> 自適應布局webkit-box </div>
　　<div class="div center"> 自適應布局webkit-box </div>
　　<div class="div right"> 自適應布局webkit-box </div>
</div>

 

 對應上面的css代碼：

*{padding:0px;margin:0px;}/*不建議添加，這里為了方便測試*/
.main{width:100%;margin:0 auto;background: #dadada;display: box;display: -webkit-box;display: -moz-box;}
.div{height:300px;color:#fff;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
.left{background: #333;}
.right{background: #999;}
.center{background: #666;}

 這里只做一個例子，其他的有興趣的可以試一下！