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:;

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

巴特西

CSS3属性——“box-flex”

最新文章

热门文章