自适应布局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;}

这里只做一个例子，其他的有兴趣的可以试一下！

• ← Previous Post
• Next Post →