CSS弹性布局（Flexbox）

### 弹性布局（Flexbox）

Flexbox 是一种现代的 CSS 布局模式，旨在提供一种更加高效、灵活的方式来设计一维布局（行或列）。它能够自动调整容器内项目的大小和间距，以适应不同的屏幕尺寸和显示设备，从而简化布局的实现。

------

#### 1. Flexbox 的基本概念

Flexbox 是一个基于容器和项目的布局系统：

- **容器（Flex Container）**：定义了布局的上下文，所有子元素（项目）都会按照 Flexbox 的规则进行排列。
- **项目（Flex Items）**：容器内的直接子元素，会根据容器的设置自动调整大小和位置。

**基本结构**：

HTML复制

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

css复制

```css
.flex-container {
    display: flex; /* 或 inline-flex */
}
```

------

#### 2. 容器属性（Container Properties）

容器属性用于定义整个 Flexbox 布局的行为。

##### （1）`display`

- 定义一个元素是否为 Flex 容器。
- 可选值：
  - `flex`：创建一个块级 Flex 容器。
  - `inline-flex`：创建一个行内 Flex 容器。

css复制

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

##### （2）`flex-direction`

- 定义主轴的方向。
- 可选值：
  - `row`（默认值）：水平方向，从左到右。
  - `row-reverse`：水平方向，从右到左。
  - `column`：垂直方向，从上到下。
  - `column-reverse`：垂直方向，从下到上。

css复制

```css
.flex-container {
    display: flex;
    flex-direction: row; /* 默认值 */
}
```

##### （3）`justify-content`

- 定义主轴上的对齐方式。
- 可选值：
  - `flex-start`（默认值）：项目对齐到主轴的起始位置。
  - `flex-end`：项目对齐到主轴的结束位置。
  - `center`：项目居中对齐。
  - `space-between`：项目之间等间距分布，两端对齐。
  - `space-around`：项目之间和两侧等间距分布。
  - `space-evenly`：项目之间和两侧等间距分布，间距相等。

css复制

```css
.flex-container {
    display: flex;
    justify-content: center; /* 居中对齐 */
}
```

##### （4）`align-items`

- 定义交叉轴上的对齐方式。
- 可选值：
  - `stretch`（默认值）：项目拉伸以填满容器的高度。
  - `flex-start`：项目对齐到交叉轴的起始位置。
  - `flex-end`：项目对齐到交叉轴的结束位置。
  - `center`：项目在交叉轴上居中对齐。
  - `baseline`：项目对齐到基线。

css复制

```css
.flex-container {
    display: flex;
    align-items: center; /* 交叉轴居中对齐 */
}
```

##### （5）`align-content`

- 定义多行容器中行与行之间的对齐方式（仅在多行 Flexbox 中有效）。
- 可选值：
  - `stretch`（默认值）：行拉伸以填满容器。
  - `flex-start`：行对齐到容器的起始位置。
  - `flex-end`：行对齐到容器的结束位置。
  - `center`：行在容器中居中对齐。
  - `space-between`：行之间等间距分布。
  - `space-around`：行之间和两侧等间距分布。

css复制

```css
.flex-container {
    display: flex;
    flex-wrap: wrap; /* 多行布局 */
    align-content: space-between;
}
```

##### （6）`flex-wrap`

- 定义项目是否可以换行。
- 可选值：
  - `nowrap`（默认值）：项目不换行。
  - `wrap`：项目在必要时换行。
  - `wrap-reverse`：项目换行，但方向相反。

css复制

```css
.flex-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
}
```

------

#### 3. 项目属性（Item Properties）

项目属性用于控制单个 Flex 项目的行为。

##### （1）`flex`

- 定义项目的灵活性，即项目如何在容器中分配额外空间。
- 是 `flex-grow`、`flex-shrink` 和 `flex-basis` 的简写。
  - `flex-grow`：定义项目的放大比例。
  - `flex-shrink`：定义项目的缩小比例。
  - `flex-basis`：定义项目的初始大小（默认为 `auto`）。

css复制

```css
.flex-item {
    flex: 1; /* 等同于 flex: 1 1 auto */
}
```

##### （2）`align-self`

- 定义单个项目在交叉轴上的对齐方式，覆盖容器的 `align-items`。
- 可选值：
  - `auto`（默认值）：继承容器的 `align-items`。
  - `flex-start`、`flex-end`、`center`、`baseline`、`stretch`。

css复制

```css
.flex-item {
    align-self: flex-end; /* 单独对齐 */
}
```

------

#### 4. Flexbox 的常见应用场景

Flexbox 非常适合用于以下场景：

##### （1）水平或垂直居中

css复制

```css
.center {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 示例：全屏居中 */
}
```

##### （2）响应式布局

css复制

```css
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-item {
    flex: 1 1 200px; /* 每个项目至少 200px 宽 */
}
```

##### （3）导航栏

css复制

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

##### （4）卡片布局

css复制

```css
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card {
    flex: 1 1 300px; /* 每张卡片至少 300px 宽 */
    margin: 10px;
}
```

##### （5）多列布局

css复制

```css
.columns {
    display: flex;
    flex-direction: row;
}

.column {
    flex: 1; /* 每列等宽 */
}
```

------

#### 5. 总结

Flexbox 是一种强大且灵活的布局工具，适用于一维布局（行或列）。通过合理使用容器属性和项目属性，可以轻松实现水平或垂直居中、响应式布局、导航栏、卡片布局等多种常见场景。它比传统的布局方式（如浮动和定位）更简洁、更易维护，是现代前端开发中不可或缺的工具。