CSS3中的box-flex属性

2019年9月14日 147次阅读 来源: 点不着蚊香

之前在网上碰到阿里前端的面试题，如下：

下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

《CSS3中的box-flex属性》

已知HTML结构是：


<div>
 <div>column 1</div>
 <div>column 2</div>
 <div>column 3</div>
</div>

在这里我们要用到一个概念：box-flex，字面意思可以看出来是可收缩的盒子，用来按比例分配父标签的宽度(或高度)空间。

当至少设置box-flex:1，才能起作用，当然，在子元素按比例分配空间时，还必须设置父元素的display为-box-flex，在这里还需要注意，假如某个子元素不是按比例分配空间，需设置box-flex:0;之后再设置其空间大小。

由上我们可以知道，该题的解答如下：


.box{
    width:100%;
    height:50px;
    background-color:green;
    display:-moz-box;
    display:-webkit-box;
    display:box;
    
}
.item{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background-color:#fff;
    margin:10px;
}
.item:first-child{
    -moz-box-flex:0;
    -webkit-box-flex:0;
    box-flex:0;
    width:200px;
}

需要注意的是：
display:-moz-box;
display:-webkit-box;
display:box;
是为了适应不同内核的浏览器，处于兼容性的考虑，应当三个都写上。

    原文作者：点不着蚊香
    原文地址: https://segmentfault.com/a/1190000002612272
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞