概述

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    |

:::

输出：

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

:::

输出：

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

:::

输出：

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

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

贡献者

pengzhanbo

更新日志

2025/5/16 13:35

查看所有更新日志

• 79af2-feat(plugin-md-power): add flex container (#597)于 2025/5/16