131 lines
2.0 KiB
Markdown
131 lines
2.0 KiB
Markdown
---
|
|
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 |
|
|
|
|
:::
|