某公司面试题：下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。使用CSS3中的功能实现它们的布局。
这里要用到的CSS3特性box-flex
box-flex ：属性规定框的子元素是否可伸缩其尺寸。可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
此外，元素的可伸缩行柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。
思路：
1.定义如下html：
<body> <div class="box"> <div class="item">column1</div> <div class="item">column2</div> <div class="item">column3</div> </div> </body>
2.对column1设置固定宽度，box-flex：0（表示固定宽度，不参与自适应宽度）width:200px;
3.对column2 column3设置box-flex：1（按照比例1自适应宽度）；
css代码如下：
<head>
<style type="text/css">
.box {
background-color:green;
display:-moz-box;
display:-webkit-box;
display:box;
height:50px;
line-height:30px;
text-indent:10px;
}
.item {
box-flex:1;
-moz-box-flex:1;
-webkit-box-flex:1;
margin:10px;
background:#fff;
text-align:center
}
.item:first-child {
box-flex:0;
-moz-box-flex:0;
-webkit-box-flex:0;
width:200px;
background:#fff;
margin:10px;
text-align: left;
}
.item:nth-child(2) {
margin:10px 0
}
</style>
</head>
看看它的显示效果：
时间： 2025-01-11 23:23:20