Flex 布局语法

封面图 • 2025-10-17 • Html/Css

Flex 布局（Flexible Box）是 CSS 中一种强大的布局模型，用于在不同屏幕尺寸下更灵活地对齐和分布元素。它主要通过 **Flex 容器** 和 **Flex 项目** 来实现布局。

---

## 🧩 一、基本概念

- **Flex 容器（Flex Container）**：设置 `display: flex` 或 `display: inline-flex` 的元素。
- **Flex 项目（Flex Items）**：Flex 容器内的子元素。

---

## 🧾 二、Flex 容器属性（用于设置 Flex 容器）

| 属性 | 说明 |
|------|------|
| `display` | 设置为 `flex` 或 `inline-flex` |
| `flex-direction` | 设置主轴方向（`row`, `row-reverse`, `column`, `column-reverse`） |
| `flex-wrap` | 设置是否换行（`nowrap`, `wrap`, `wrap-reverse`） |
| `flex-flow` | 简写属性：`flex-direction` + `flex-wrap` |
| `justify-content` | 主轴对齐方式（`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`） |
| `align-items` | 交叉轴对齐方式（`stretch`, `flex-start`, `flex-end`, `center`, `baseline`） |
| `align-content` | 多行时的交叉轴对齐方式（仅在 `flex-wrap: wrap` 时有效） |

---

## 📦 三、Flex 项目属性（用于设置 Flex 项目）

| 属性 | 说明 |
|------|------|
| `order` | 控制项目的排列顺序（数值越小越靠前，默认 0） |
| `flex-grow` | 指定项目在空间足够时的扩展比例（默认 0） |
| `flex-shrink` | 指定项目在空间不足时的收缩比例（默认 1） |
| `flex-basis` | 项目在主轴上的初始大小（可以是长度或百分比） |
| `flex` | 简写属性：`flex-grow`, `flex-shrink`, `flex-basis`（默认 `0 1 auto`） |
| `align-self` | 覆盖容器的 `align-items` 属性，单独设置某个项目的对齐方式 |

---

## 💡 四、示例代码

### 1. 基本使用

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

### 2. 设置主轴方向为列（垂直排列）

```css
.container {
  display: flex;
  flex-direction: column;
}
```

### 3. 项目扩展与收缩

```css
.item1 {
  flex: 1; /* grow=1, shrink=1, basis=0% */
}

.item2 {
  flex: 2; /* grow=2, shrink=1, basis=0% */
}
```

### 4. 对齐方式

```css
.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: flex-end;   /* 交叉轴底部对齐 */
}
```

---

## ✅ 五、常见用法场景

- 导航栏布局
- 图片瀑布流
- 响应式布局
- 左右分栏
- 水平/垂直居中

---

如果你需要具体的某一个属性详解，或者想看实际效果演示，也可以告诉我 😊