mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-26 11:38:15 +08:00
126 lines
1.9 KiB
Markdown
126 lines
1.9 KiB
Markdown
---
|
|
url: /guide/markdown/flex/index.md
|
|
---
|
|
## 概述
|
|
|
|
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 |
|
|
|
|
:::
|