Overview

The Flex container ::: flex provides a convenient way to apply Flexbox layout to block-level content in markdown.

Usage

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

<!-- Block content 1 -->

<!-- Block content 2 -->

:::

Attributes

• On the main axis, use center / between / around to specify alignment;
• On the cross axis, use start / center / end to specify alignment;
• Use gap="20" to specify spacing;
• Use column to set the main axis direction to vertical.

Examples

Centered Table Alignment

Input:

::: flex center

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

:::

Output:

Column 1	Column 2	Column 3
1	2	3
4	5	6

Two Tables with Left-Right Alignment

Input:

::: flex between center

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

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

:::

Output:

Column 1	Column 2	Column 3
1	2	3
4	5	6

Column 1	Column 2	Column 3
1	2	3
4	5	6

Evenly Spaced Tables

Input:

::: flex around center

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

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

:::

Output:

Column 1	Column 2	Column 3
1	2	3
4	5	6

Column 1	Column 2	Column 3
1	2	3
4	5	6

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25