Row (default)
A
B
C
Column
A
B
C
Wrap
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 7
Tag 8
Tag 9
Tag 10
Tag 11
Tag 12
Justify & Align
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
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | "row" | "row-reverse" | "column" | "column-reverse" | "row" | Flex direction |
| wrap | "nowrap" | "wrap" | "wrap-reverse" | — | Flex wrapping behavior |
| gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Space between items |
| align | "start" | "center" | "end" | "stretch" | "baseline" | — | Cross-axis alignment (items-*) |
| justify | "start" | "center" | "end" | "between" | "around" | "evenly" | — | Main-axis alignment (justify-*) |
| as | React.ElementType | "div" | Rendered HTML element |
| className | string | — | Additional classes on the root element |
Usage
import { Flex } from "substrateui";
<Flex gap="lg" align="center" justify="between">
<Logo />
<Nav />
<UserMenu />
</Flex>
<Flex wrap="wrap" gap="sm">
{tags.map(tag => <Badge key={tag}>{tag}</Badge>)}
</Flex>
<Flex direction="column" gap="xl">
<Header />
<Main />
<Footer />
</Flex>