CSS3:三个矩形，一个宽200px，其余宽相等且自适应满铺

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

某公司面试题：下图绿色区域的宽度为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>