---
title: Flex 容器
icon: material-symbols-light:flex-no-wrap
createTime: 2025/05/16 17:56:39
permalink: /guide/markdown/flex/
badge: 新
---

## 概述

Flex 弹性容器 `::: flex` 提供一种便捷的方式，在 markdown 中对 块级内容 应用 Flex 布局。

## 用法

```md
::: flex [center|between|around] [start|center|end] [gap="20"] [column]

<!--块级内容 1 -->

<!--块级内容 2 -->

:::
```

## 属性

- 在 主轴 方向上，使用 `center` / `between` / `around` 指定对齐方式；
- 在 交叉轴 方向上，使用 `start` / `center` / `end` 指定对齐方式；
- 使用 `gap="20"` 指定间距；
- 使用 `column` 指定主轴方向为垂直方向。

## 示例

### 表格居中对齐

**输入：**

```md
::: flex center

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

:::
```

**输出：**

::: flex center

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

:::

### 两个表格左右对齐

**输入：**

```md
::: flex between center

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

:::
```

**输出：**

::: flex between center

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

:::

### 平均排列两个表格

**输入：**

```md
::: flex around center

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

:::
```

**输出：**

::: flex around center

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

| 列 1 | 列 2 | 列 3 |
| ---- | ---- | ---- |
| 1    | 2    | 3    |
| 4    | 5    | 6    |

:::