> 該教程整理自[[手冊網](http://www.shouce.ren/api/view/a/2834#articleHeader8)]
**彈性盒子模型（Flexible Box） 屬性**
<table class="table table-striped table-bordered table-condensed">
<tbody>
<tr>
<th width="28%" align="left">
屬性
</th>
<th width="67%" align="left">
說明
</th>
<th width="5%" align="left">
CSS
</th>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12164">flex</a>
</td>
<td>
復合屬性。設置或檢索彈性盒模型對象的子元素如何分配空間。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12165">flex-grow</a>
</td>
<td>
設置或檢索彈性盒的擴展比率。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12166">flex-shrink</a>
</td>
<td>
設置或檢索彈性盒的收縮比率。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12167">flex-basis</a>
</td>
<td>
設置或檢索彈性盒伸縮基準值。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12168">flex-flow</a>
</td>
<td>
復合屬性。設置或檢索彈性盒模型對象的子元素排列方式。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12169">flex-direction</a>
</td>
<td>
該屬性通過定義flex容器的主軸方向來決定felx子項在flex容器中的位置。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12170">flex-wrap</a>
</td>
<td>
該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12171">align-content</a>
</td>
<td>
在彈性容器內的各項沒有占用交叉軸上所有可用的空間時對齊容器內的各項（垂直）。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12172">align-items</a>
</td>
<td>
定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12173">align-self</a>
</td>
<td>
定義flex子項單獨在側軸（縱軸）方向上的對齊方式。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12174">justify-content</a>
</td>
<td>
設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a href="http://www.shouce.ren/api/view/a/12175">order</a>
</td>
<td>
設置或檢索彈性盒模型對象的子元素出現的順序。
</td>
<td>
3
</td>
</tr>
</tbody>
</table>
