弹性布局（display:flex;）属性详解

封面图 • 2025-09-23 • HTML5

弹性布局（Flexbox）是 CSS 中用于创建灵活、响应式布局的一种强大工具。它通过 `display: flex;` 属性来启用，使容器内的子元素（称为“flex items”）能够根据容器的大小自动调整位置和大小。

---

## 一、基本概念

### 1. **Flex 容器（Flex Container）**
使用 `display: flex;` 或 `display: inline-flex;` 的元素成为 Flex 容器。

```css
.container {
  display: flex;
}
```

### 2. **Flex 项目（Flex Items）**
Flex 容器内部的子元素就是 Flex 项目。

```html
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
```

---

## 二、Flex 容器的常用属性

| 属性 | 说明 |
|------|------|
| `display` | 设置为 `flex` 或 `inline-flex` |
| `flex-direction` | 设置主轴方向（row, row-reverse, column, column-reverse） |
| `flex-wrap` | 设置是否换行（nowrap, wrap, wrap-reverse） |
| `justify-content` | 主轴对齐方式（flex-start, flex-end, center, space-between, space-around） |
| `align-items` | 交叉轴对齐方式（flex-start, flex-end, center, baseline, stretch） |
| `align-content` | 多行时的交叉轴对齐方式（与 `align-items` 类似） |
| `gap` / `row-gap` / `column-gap` | 设置项目之间的间距 |

---

## 三、详细讲解每个属性

### 1. `flex-direction`

控制主轴的方向（即项目排列的方向）：

```css
.container {
  flex-direction: row;       /* 默认，从左到右 */
  flex-direction: row-reverse; /* 从右到左 */
  flex-direction: column;      /* 从上到下 */
  flex-direction: column-reverse; /* 从下到上 */
}
```

---

### 2. `flex-wrap`

控制项目是否换行：

```css
.container {
  flex-wrap: nowrap;         /* 默认，不换行 */
  flex-wrap: wrap;           /* 换行 */
  flex-wrap: wrap-reverse;   /* 反向换行 */
}
```

---

### 3. `justify-content`

控制主轴上的对齐方式：

```css
.container {
  justify-content: flex-start;    /* 默认，左对齐 */
  justify-content: flex-end;      /* 右对齐 */
  justify-content: center;        /* 居中对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around;  /* 项目周围有相等空间 */
}
```

---

### 4. `align-items`

控制交叉轴上的对齐方式：

```css
.container {
  align-items: flex-start;    /* 顶部对齐 */
  align-items: flex-end;      /* 底部对齐 */
  align-items: center;        /* 垂直居中 */
  align-items: baseline;      /* 基线对齐 */
  align-items: stretch;       /* 默认，拉伸填满容器 */
}
```

---

### 5. `align-content`

当 `flex-wrap: wrap;` 时，控制多行项目的交叉轴对齐方式：

```css
.container {
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}
```

---

### 6. `gap` / `row-gap` / `column-gap`

设置项目之间的间距：

```css
.container {
  gap: 10px;               /* 同时设置行和列的间隔 */
  row-gap: 10px;           /* 行间距 */
  column-gap: 10px;        /* 列间距 */
}
```

---

## 四、Flex 项目的属性（可应用于子元素）

| 属性 | 说明 |
|------|------|
| `flex-grow` | 定义项目在空间中的扩展比例 |
| `flex-shrink` | 定义项目在空间不足时的收缩比例 |
| `flex-basis` | 定义项目的基础长度 |
| `flex` | 简写属性：`flex-grow`, `flex-shrink`, `flex-basis` |
| `order` | 控制项目的排列顺序（数值越小越靠前） |
| `align-self` | 覆盖 `align-items` 的设置，单独设置某个项目对齐方式 |

---

## 五、示例代码

```html
<div class="container">
  <div class="item" style="flex: 1;">Item 1</div>
  <div class="item" style="flex: 2;">Item 2</div>
  <div class="item" style="flex: 1;">Item 3</div>
</div>
```

```css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
```

---

## 六、总结

| 属性 | 作用 |
|------|------|
| `display: flex;` | 启用弹性布局 |
| `flex-direction` | 控制主轴方向 |
| `flex-wrap` | 是否换行 |
| `justify-content` | 主轴对齐方式 |
| `align-items` | 交叉轴对齐方式 |
| `gap` | 项目之间间距 |
| `flex-grow`, `flex-shrink`, `flex-basis` | 控制项目伸缩性 |

---

如果你需要更具体的示例或应用场景（如导航栏、卡片布局、响应式设计等），可以告诉我，我可以为你提供更详细的解释和代码。