Flex Container
Overview
The Flex container ::: flex provides a convenient way to apply Flexbox layout to block-level content in markdown.
Syntax
::: flex [center|between|around] [start|center|end] [gap="20"] [column]
<!-- Block content 1 -->
<!-- Block content 2 -->
:::Props
Alignment along the main axis; just write one of them
Alignment along the cross axis; just write one of them
Spacing
Sets the main axis direction to vertical
Allows child elements to wrap (flex-wrap: wrap)
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 |
