> 该教程整理自[[手册网](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>
