CSS3 box-flex属性和box-orient属性
比较有意思的是虽然目前没有浏览器支持box-flex，box-orient属性，但CSS3问世以来，这两个属性却一直很火。2014年阿里校招第5题要求使用CSS3中的功能实现三个矩形的布局，总的宽度为100%，其中的三个矩形，第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等，给出HTML结构是：
<div class="box"> <div class="item">column 1</div> <div class="item">column 2</div> <div class="item">column 3</div> </div>>
这里所指的CSS3属性包括box-flex和box-orient。由于没有浏览器支持这两个属性，Firefox支持替代的-moz-box-flex，-moz-box-orient属性，Safari,Opera以及Chrome支持替代的-webkit-box-flex,-webkit-box-orient属性。
下面是该题的CSS样式表
1 <style type="text/css"> 2 *{padding: 0;margin:0} 3 .box{ 4 width: 100%; 5 background: greenyellow; 6 box-orient:horizontal; 7 -webkit-box-orient: horizontal; 8 -ms-box-orient:horizontal; 9 -o-box-orient:horizontal; 10 -moz-box-orient: horizontal; 11 display: -ms-box; 12 display: -moz-box; 13 display: -webkit-box; 14 display: -o-box; 15 } 16 .box>.item{ 17 height: 100px; 18 background: red; 19 margin: 10px 10px 10px 0; 20 -moz-box-flex:1; 21 -webkit-box-flex: 1; 22 } 23 .box .item:first-child{ 24 width: 200px; 25 margin-left: 10px; 26 -moz-box-flex: 10px; 27 -webkit-box-flex: 10px; 28 } 29 30 </style>
1 box-flex：
该属性规定框的子元素是否可以伸缩其尺寸（可伸缩元素能够随着框的缩小或扩大而缩小或放大，只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间），主要让子容器对父容器的宽度按一定规则进行划分。如上述代码三个子块的值都是1，也就是每个子块的宽度占1/3,但由于对这道题来说，由于.box .item:first-child{width:200px}对第一个子元素限定为宽度200px,因此第二个和第三个的宽度均为剩下宽度的1/2。
如下图代码
1 <html> 2 <head> 3 <style> 4 div 5 { 6 display:-moz-box; /* Firefox */ 7 display:-webkit-box; /* Safari and Chrome */ 8 display:box; 9 width:300px; 10 border:1px solid black; 11 } 12 13 #p1 14 { 15 -moz-box-flex:1.0; /* Firefox */ 16 -webkit-box-flex:1.0; /* Safari and Chrome */ 17 box-flex:1.0; 18 border:1px solid red; 19 } 20 21 #p2 22 { 23 -moz-box-flex:2.0; /* Firefox */ 24 -webkit-box-flex:2.0; /* Safari and Chrome */ 25 box-flex:2.0; 26 border:1px solid blue; 27 } 28 </style> 29 </head> 30 <body> 31 32 <div> 33 <p id="p1">Hello</p> 34 <p id="p2">W3School</p> 35 </div> 36 37 <p><b>注释：</b>IE 不支持 box-flex 属性。</p> 38 39 </body> 40 </html>
这是W3school中的一个例子红色和蓝色各占总宽度的1/3和2/3。
不知道大家有没有注意，上述示例的父容器的display均为box,为什么呢~因为只有这样子容器才可以进行划分，不过还有点小问题，这时如果使用margin:0 auto在chrome下令子元素居中是比较perfect，但是Firefox下就不行了，别着急，我们可以通过把父容器设置为text-align:center;来化险为夷。
2 box-orient:
他也是一个可伸缩框属性，规定框的子元素是否应该水平或者垂直排列。
