容器属性

设置 display: flex 或 inline-flex 后，父元素成为弹性容器，常用容器属性包括：

1. flex-direction

定义主轴方向，决定子元素排列方向。

• row（默认）：主轴为水平方向，项目从左到右排列。
• row-reverse：主轴为水平方向，项目从右到左排列。
• column：主轴为垂直方向，项目从上到下排列。
• column-reverse：主轴为垂直方向，项目从下到上排列。

flex-direction: row;

2. flex-wrap

定义是否换行。

• nowrap（默认）：不换行，所有项目在一行内。
• wrap：换行，项目溢出时换到下一行。
• wrap-reverse：换行，但换行方向相反。

flex-wrap: wrap;

3. justify-content

定义主轴（水平）上的对齐方式。

• flex-start（默认）：左对齐。
• flex-end：右对齐。
• center：居中对齐。
• space-between：两端对齐，项目之间间距相等。
• space-around：项目两侧间距相等。

justify-content: space-between;

4. align-items

定义交叉轴（垂直）上的对齐方式。

• stretch（默认）：拉伸填满容器高度。
• flex-start：顶部对齐。
• flex-end：底部对齐。
• center：居中对齐。
• baseline：项目文字基线对齐。

align-items: center;

5. align-content

多行时，定义交叉轴的对齐方式。仅当有多行换行时生效。

• stretch（默认）：拉伸填满。
• flex-start：顶部对齐。
• flex-end：底部对齐。
• center：居中对齐。
• space-between：两端对齐。
• space-around：间距均匀。

align-content: flex-start;

---

Flex 容器属性示例

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。