vuepress-theme-plume/docs/guide/markdown/flex.md

title, icon, createTime, permalink, badge

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

概述

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

用法

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

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

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

:::

属性

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

示例

表格居中对齐

输入：

::: flex center

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

:::

输出：

::: flex center

列 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    |

:::

输出：

::: flex between 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    |

:::

输出：

::: flex around center

列 1	列 2	列 3
1	2	3
4	5	6

列 1	列 2	列 3
1	2	3
4	5	6

:::