CSS3盒模型布局display：box详解

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。

经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的都支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。

写法：

 display:-moz-box;

    display:-webkit-box;

    display:box;

HTML代码：

<article>

    <section>01</section>

    <section>02</section>

    <section>03</section>

</article>

CSS代码：

.wrap{

    width:600px;

    height:200px;

    <span style="color: #ff0000;">display:-moz-box;

    display:-webkit-box;

    display:box;</span>

}

.sectionOne{

    background:orange;

    -moz-box-flex:3;

    -webkit-box-flex:3;

    box-flex:3;

}

.sectionTwo{

    background:purple;

    -moz-box-flex:1;

    -webkit-box-flex:1;

    box-flex:1;

}

.sectionThree{

    width:200px;//设置固定宽度

    background:green;

}

说明：

必须给父容器定义css属性display:box其子容器才可以进行划分

sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。