Flex
Flex layout primitive for vertical or horizontal stacking with gap control. ⚠ Unlike CSS `flex-direction`, `direction` defaults to `vertical` — pass `direction="horizontal"` for a row.
Category: layout · WCAG 2.1-AA · layout, flex, stack, spacing
Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'vertical' | 'horizontal' | vertical | Flex direction. ⚠ Defaults to `vertical`, unlike CSS `flex-direction` (and unlike Chakra/MUI/Radix `Flex`, which default to a row) — `<Flex justify="between">` alone produces a centered vertical stack. |
gap | 1|2|3|4|5|6|8|10|12 | 4 | Spacing token step |
align | 'start'|'center'|'end'|'stretch' | — | align-items |
justify | 'start'|'center'|'end'|'between' | — | justify-content |
wrap | boolean | false | Allow wrapping |
Design tokens
--cascivo-space-*
When to use
- Arranging children vertically or horizontally with a consistent gap
- The default primitive for spacing a small set of elements in one direction
When not to use
- Two-dimensional layouts — use Grid
- Responsive auto-wrapping card collections — use AutoGrid
- A visual card-pile / overlapping avatars — that is `Stack` in @cascivo/react (an `offset` prop), a different component.
Examples
Vertical
Default vertical stack
<Flex gap={4}><div>A</div><div>B</div></Flex>Horizontal
Row layout
<Flex direction="horizontal" gap={2}><div>A</div><div>B</div></Flex>