子元素按比例横向分布——css3弹性盒子模型

<style type="text/css">
#b{
    display:-moz-box;
    -moz-box-orient:horizontal;
    display:-webkit-box;
    display:box;
    box-orient:horizontal;

    border: 1px solid black;
}
#box1{
    background:orange;
    -moz-box-flex: 2;
     -webkit-box-flex: 2;
     box-flex: 2;
}
#box2{
    background:green;
    -moz-box-flex: 1;
     -webkit-box-flex: 1;
     box-flex: 1;
}
#box3{
    background:pink;
    -moz-box-flex: 2;
     -webkit-box-flex: 2;
     box-flex: 2;
}
</style>
<div id="b">
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
</div>

这段代码将父元素以2:1:2的宽度分给子元素，运行结果如下