之前在网上碰到阿里前端的面试题，如下：
下图绿色区域的宽度为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;
是为了适应不同内核的浏览器，处于兼容性的考虑，应当三个都写上。
