CSS3中几个新增加的盒模型属性使用教程

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。
一、box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
html代码：
</div>

1. <article>  
2.     <section>01</section>  
3.     <section>02</section>  
4.     <section>03</section>  
5. </article>  

</div> </div> CSS代码：
</div>

1. .wrap{   
2.     width:600px;   
3.     height:200px;   
4.     display:-moz-box;   
5.     display:-webkit-box;   
6.     display:box;   
7. }   
8. .sectionOne{   
9.     background:orange;   
10.     -moz-box-flex:3;   
11.     -webkit-box-flex:3;   
12.     box-flex:3;   
13. }   
14. .sectionTwo{   
15.     background:purple;   
16.     -moz-box-flex:2;   
17.     -webkit-box-flex:2;   
18.     box-flex:2;   
19. }   
20. .sectionThree{   
21.     -moz-box-flex:1;   
22.     -webkit-box-flex:1;   
23.     box-flex:1;   
24.     background:green;   
25. }  

</div> </div>

展示效果：

说明：
必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居父结构宽度的1/6即100px。
以上是按比例数进行划分分配的，如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那？
如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩下的宽度基础上按一定比例进行划分分配。请看下面代码:
HTML代码：

</div>

1. <article>  
2.     <section>01</section>  
3.     <section>02</section>  
4.     <section>03</section>  
5. </article>  

</div> </div> CSS代码：
</div>

1. .wrap{   
2.     width:600px;   
3.     height:200px;   
4.     display:-moz-box;   
5.     display:-webkit-box;   
6. &n