Flex Container New
About 257 wordsLess than 1 minute
2025-10-08
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/aroundto specify alignment; - On the cross axis, use
start/center/endto specify alignment; - Use
gap="20"to specify spacing; - Use
columnto 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 |
