Layout

Flex

Generic flex container with all axes exposed. Reach for it when Stack / HStack / VStack aren't expressive enough.

Examples

direction="row-reverse" wrap

1 2 3 4

<Flex direction="row-reverse" wrap="wrap" gap={2}>
  <Badge>1</Badge>
  <Badge>2</Badge>
  <Badge>3</Badge>
  <Badge variant="accent">4</Badge>
</Flex>

justify="around"

A B C

<Flex justify="around" gap={2}>…</Flex>

Props

Prop	Type	Default	Description
`direction`	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`	`'row'`	flex-direction value.
`gap`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	`2`	Maps to 0 or spacing tokens.
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	`'start'`	align-items value.
`justify`	`'start' \| 'center' \| 'end' \| 'between' \| 'around'`	`'start'`	justify-content value.
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'nowrap'`	flex-wrap value.

Install

CLI

npx @a3tai/mittsu add flex