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

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

如：

html：

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

依次是

总共分为6等分（1+2+3）

总宽度的 6分之3，6分之2，6分之1

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

如：
html：