CSS3中的box-flex屬性

以前在網上碰到阿里前端的面試題，以下：

下圖綠色區域的寬度爲100%，其中有三個矩形，第一個矩形的寬度是200px，第二個和第三個矩形的寬度相等。請使用CSS3中的功能實現它們的佈局。

已知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;
是爲了適應不一樣內核的瀏覽器，處於兼容性的考慮，應當三個都寫上。