display:box; 弹性盒子模型

.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>

box-orient:确定子元素的方向。是横着排还是竖着走
box-orient:horizontal|vertical|inline-axis|block-axis|inherit
inline-axis:默认
horizontal/inline-axis:让子元素横排
vertical/block-axis:让子元素竖排
inherit:继承

box-direction:用来确定子元素的排列顺序
normal|reverse|inherit
normal:默认，按照正常顺序
reverse:反转顺序

box-align 垂直方向对齐
box-align:start|end|center|baseline|stretch
stretch:默认值，为拉伸，也就是父标签高度多高，其孩子元素的高度就多高
start:顶边对齐
end:底部对齐
center:居中对齐
baseline:基线对齐（英文字母o,m,n等的底边位置线）

box-pack 水平方向
box-pack:start|end|center|justify
start:默认，与父标签的起始位置对齐(相当于子元素float：left;但前提是没有设置反转box-direction:reverse)
end:与父标签的结尾位置对齐
center:居中
justify:两端对齐

box-line 用来决定子元素是否可以换行显示
box-line:single|multiple
single:默认，不换行
multiple:多行显示（Firefox和chrome暂时不支持）

box-ordinal-group 决定子元素的位置，数值越小，位置越靠前