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:*,它也会按比例分配。