webkit-box之-webkit-box-flex

在用-webkit-box实现布局时，一般会使用-webkit-box-flex来控制每个子容器的占比。需要注意的是flex属性分配的是剩余宽度。剩余宽度=父容器宽度-子容器固定宽度（优先）/子容器内容宽度-子容器margin&border&padding

如想实现一个横向排列，最左边固定100px，最右边固定200px，中间两列分为两部分，第二部分是第一部分的2倍宽。

html：

<div class="box">
<div class='flex1'>第一个容器</div>
<div class='flex2'>第二个容器</div>
<div class='flex3'>第三个容器</div>
<div class='flex4'>第四个容器</div>
</div>

css：

.box{
display:-webkit-box;
height:500px;
width:100%;
}
.flex1{
background:red;
width:100px;

}
.flex2{
background:yellow;
-webkit-box-flex:1;
}
.flex3{
background:blue;
-webkit-box-flex:2;
}
.flex4{
background:grey;
width:200px;
}