css3 弹性盒子模型

父元素需要申明为display：box或者display：inline－box
box-orient可确定子元素方向，是横着排还是竖着走horizontal | vertical | inline-axis | block-axis | inherit
其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。

box-directionbox-direction是用来确定子元素的排列顺序，可选值有：
normal | reverse | inherit 正序1 2 3 倒叙 3 2 1

子元素申明为：box－flex：x（x代表所占比例大小）

Paste_Image.png

.test_box {
display: -moz-box;
display: -webkit-box;
display: box;
...
}
.list {
...
}
.list_one {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.list_two{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
}
<div class="test_box">
<div class="list list_two">1</div>
<div class="list list_one">2</div>
<div class="list list_one">3</div>
</div>

Paste_Image.png

当子元素有绝对宽度时，另外两个弹性元素根据剩下来的宽度还比例分得宽度
新增CSS样式如下：

.list_w300 { width: 300px; }
HTML代码如下：

<div class="test_box">
<div class="list list_two">1</div>
<div class="list list_one">2</div>
<div class="list list_w300">3</div>
</div>