CSS Flexbox教程

封面图 • 2026-04-11 • Html/Css

当然！下面是一个关于 **CSS Flexbox** 的详细教程，适合初学者和中级开发者。Flexbox 是一种用于布局的现代 CSS 技术，可以轻松地创建响应式和灵活的页面布局。

---

## 🌟 什么是 Flexbox？

Flexbox（Flexible Box）是一种一维布局模型，用于在网页中对容器内的子元素进行灵活排列。它非常适合处理水平或垂直方向上的对齐、分布、顺序等问题。

---

## 🧩 基本概念

### 1. **Flex Container（弹性容器）**
- 使用 `display: flex;` 或 `display: inline-flex;` 来定义一个容器为 Flex 容器。
- 所有直接子元素都会成为 Flex Item（弹性项目）。

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

### 2. **Flex Item（弹性项目）**
- 容器中的子元素（直接子元素）。
- 可以通过 Flexbox 属性控制它们的排列方式。

---

## 📐 主要属性

### ✅ 容器属性（Flex Container Properties）

| 属性 | 说明 |
|------|------|
| `display` | 设置容器为 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` | 多行时的交叉轴对齐方式（与 justify-content 类似） |

### ✅ 项目属性（Flex Item Properties）

| 属性 | 说明 |
|------|------|
| `flex-grow` | 项目在空间不足时的扩展比例 |
| `flex-shrink` | 项目在空间不足时的收缩比例 |
| `flex-basis` | 项目在主轴上的初始大小 |
| `flex` | 简写属性：`flex-grow`, `flex-shrink`, `flex-basis` |
| `order` | 项目排列顺序（数值越小越靠前） |
| `align-self` | 单个项目在交叉轴上的对齐方式（覆盖 `align-items`） |

---

## 🧪 示例代码

### 示例 1：基本布局

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

```css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  border: 1px solid #ccc;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}
```

### 示例 2：垂直居中

```css
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
```

### 示例 3：多行布局

```css
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.item {
  flex: 1 1 200px; /* grow shrink basis */
}
```

---

## 🔄 常见用法场景

| 场景 | 说明 |
|------|------|
| 导航栏 | 水平排列导航项，自动调整间距 |
| 对齐内容 | 实现垂直/水平居中 |
| 响应式布局 | 自动换行，适应不同屏幕尺寸 |
| 动态内容 | 根据内容自动调整宽度和高度 |

---

## ⚠️ 注意事项

- Flexbox 是一维布局，不适合复杂的二维布局（如表格）。
- `flex-direction` 默认是 `row`（从左到右），可以通过设置 `column` 改变方向。
- `align-items` 默认是 `stretch`，即拉伸项目填满容器高度。

---

## 📘 学习资源推荐

- [MDN Web Docs - Flexbox](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout)
- [CSS-Tricks - A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-complete-guide-to-flexbox/)
- [W3Schools - Flexbox](https://www.w3schools.com/css/css3_flexbox.asp)

---

如果你需要更详细的某个属性讲解，或者想看实际应用案例，欢迎继续问我 😊

你也可以告诉我你想要实现的具体效果，我可以帮你写出对应的 Flexbox 代码。