由阿里14校招抛砖引玉谈CSS3 box-flex属性和box-orient属性

浏览数：46 / 时间：2015年06月09日

　　比较有意思的是虽然目前没有浏览器支持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:

他也是一个可伸缩框属性，规定框的子元素是否应该水平或者垂直排列。

技术分享