Flex 容器 新
约 311 字大约 1 分钟
2025-05-16
概述
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 |
