# 容器属性

URL: https://caijiao.org/css/07-flexbox/02-container-properties
Source: docs/css/07-flexbox/02-container-properties.md
Description: Flex 容器属性用于控制弹性盒子的布局方向、换行、主轴和交叉轴上的对齐方式，是实现灵活布局的关键。

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

## 1. flex-direction

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

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

```css
flex-direction: row;
```

## 2. flex-wrap

定义是否换行。

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

```css
flex-wrap: wrap;
```

## 3. justify-content

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

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

```css
justify-content: space-between;
```

## 4. align-items

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

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

```css
align-items: center;
```

## 5. align-content

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

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

```css
align-content: flex-start;
```

---

## Flex 容器属性示例

[在线代码演示](/css/demos/16.html)