比较有意思的是虽然目前没有浏览器支持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:
他也是一个可伸缩框属性，规定框的子元素是否应该水平或者垂直排列。
