编辑“︁CSS弹性容器”︁（章节）

== 容器属性详解 ==
弹性容器提供了一系列属性来控制其子元素的布局：

=== flex-direction ===
定义主轴方向：
* <code>row</code>（默认）：水平方向，从左到右
* <code>row-reverse</code>：水平方向，从右到左
* <code>column</code>：垂直方向，从上到下
* <code>column-reverse</code>：垂直方向，从下到上

=== flex-wrap ===
控制项目是否换行：
* <code>nowrap</code>（默认）：不换行
* <code>wrap</code>：换行
* <code>wrap-reverse</code>：反向换行

=== justify-content ===
定义项目在主轴上的对齐方式：
* <code>flex-start</code>（默认）：向主轴起点对齐
* <code>flex-end</code>：向主轴终点对齐
* <code>center</code>：居中对齐
* <code>space-between</code>：两端对齐，项目间隔相等
* <code>space-around</code>：每个项目两侧间隔相等
* <code>space-evenly</code>：项目与容器边缘及项目间间隔完全相等

=== align-items ===
定义项目在交叉轴上的对齐方式：
* <code>stretch</code>（默认）：拉伸填满容器高度
* <code>flex-start</code>：向交叉轴起点对齐
* <code>flex-end</code>：向交叉轴终点对齐
* <code>center</code>：居中对齐
* <code>baseline</code>：基线对齐

=== align-content ===
定义多行项目在交叉轴上的对齐方式（仅当有多行时有效）：
* <code>stretch</code>（默认）：拉伸填满容器高度
* <code>flex-start</code>：向交叉轴起点对齐
* <code>flex-end</code>：向交叉轴终点对齐
* <code>center</code>：居中对齐
* <code>space-between</code>：两端对齐，行间隔相等
* <code>space-around</code>：每行两侧间隔相等