CSS3属性——“box-flex”

CSS3的新增属性有很多，其中有一个比较神奇的，通常称为盒子模型布局，不需要把div浮动，也能合理分配。看如下例子：

HTML：

<div id="box">
    <div class="box1">我是box1</div>
    <div class="box2">我是box2</div>
    <div class="box3">我是box3</div>
</div>

如果需求是这样的：.box2的宽度是固定的200px，然后水平居中，然后.box1和.box3分居其左右，平分剩下的空间。

使用这个属性就可以这样来写：

#box{
    display:box; 
    display: -moz-box; 
    display: -webkit-box; 
    background-color: #eee;
    height:90px;
    text-align: center;
    line-height: 90px;
}
.box1{
    box-flex:1; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1;
    background-color: #f00;
}
.box2{
    width:200px;
    background-color: #0f0;
}
.box3{
    box-flex:1; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1;
    background-color: #ff0;
}

此时此刻我们可以在iPhone 6下看到以下效果：

当然，这是需求要求，三个盒子也可以都写box-flex:*，它也会按比例分配。