Layout
Flex
Flexible box layout component for arranging items with direction, alignment, gap, and wrapping.
Direction
Row (default)
1
2
3
Column
1
2
3
Row Reverse
1
2
3
Column Reverse
1
2
3
Alignment
align="start"
Short
Tall
Mid
align="center"
Short
Tall
Mid
align="end"
Short
Tall
Mid
align="stretch"
A
B
C
Justify
justify="start"
A
B
C
justify="center"
A
B
C
justify="end"
A
B
C
justify="between"
A
B
C
justify="around"
A
B
C
justify="evenly"
A
B
C
Gap
gap={0}
0
0
0
0
gap={1}
1
1
1
1
gap={2}
2
2
2
2
gap={4}
4
4
4
4
gap={6}
6
6
6
6
gap={8}
8
8
8
8
Wrap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Polymorphic Tag
as="nav"
as="ul"
- List item one
- List item two
- List item three
Common Patterns
API
| Prop | Type | Default |
|---|---|---|
| direction | "row" | "col" | "row-reverse" | "col-reverse" | "row" |
| align | "start" | "center" | "end" | "stretch" | "baseline" | — |
| justify | "start" | "center" | "end" | "between" | "around" | "evenly" | — |
| wrap | boolean | false |
| gap | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | — |
| as | ElementType | "div" |