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:;
-moz-box-flex:;
-webkit-box-flex:;
background-color: #f00;
}
.box2{
width:200px;
background-color: #0f0;
}
.box3{
box-flex:;
-moz-box-flex:;
-webkit-box-flex:;
background-color: #ff0;
}
此时此刻我们可以在iPhone 6下看到以下效果：
当然，这是需求要求，三个盒子也可以都写box-flex:*，它也会按比例分配。