CSS3 display：flex和display：box有什么区别

 

父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。

如：

html：

<article>
   <section>01</section>
   <section>02</section>
   <section>03</section>
</article>

 

article{
   width:600px;
   height:200px;
   display:-moz-box;
   display:-webkit-box;
   display:box;
}

.sectionOne{
   background:orange;
   -moz-box-flex:3;
   -webkit-box-flex:3;
   box-flex:3;
}
.sectionTwo{
   background:purple;
   -moz-box-flex:2;
   -webkit-box-flex:2;
   box-flex:2;
}
.sectionThree{
   -moz-box-flex:1;
   -webkit-box-flex:1;
   box-flex:1;
   background:green;
}