父元素需要申明為display：box或者display：inline－box
box-orient可確定子元素方向，是橫著排還是豎著走h(yuǎn)orizontal | vertical | inline-axis | block-axis | inherit
其中，inline-axis是默認(rèn)值。且horizontal與inline-axis的表現(xiàn)似乎一致的，讓子元素橫排；而vertical與block-axis的表現(xiàn)也是一致的，讓元素縱列。

box-directionbox-direction是用來確定子元素的排列順序，可選值有：
normal | reverse | inherit 正序1 2 3 倒敘 3 2 1

子元素申明為：box－flex：x（x代表所占比例大?。?/p>

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

當(dāng)子元素有絕對寬度時(shí)，另外兩個(gè)彈性元素根據(jù)剩下來的寬度還比例分得寬度
新增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>