CSS3 box-flex属性和box-orient属性

水深无声 2023-08-17 17:19 132阅读 0赞

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

![131721073541742.png][]这是W3school中的一个例子红色和蓝色各占总宽度的1/3和2/3。

不知道大家有没有注意，上述示例的父容器的display均为box,为什么呢~因为只有这样子容器才可以进行划分，不过还有点小问题，这时如果使用margin:0 auto在chrome下令子元素居中是比较perfect，但是Firefox下就不行了，别着急，我们可以通过把父容器设置为text-align:center;来化险为夷。

2  box-orient:

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

![131756119483377.png][]

转载于:https://www.cnblogs.com/s-z-y/p/4422841.html

[131721073541742.png]: /images/20230808/a79daea60c754af9af616fc53c3a8c47.png
[131756119483377.png]: /images/20230808/6394b9267e3d406399763a7dced8226f.png