Flex
Single-axis flex layout. Column by default (mobile-first), with optional row direction at a breakpoint, wrap, alignment, and justification.
Example
ReactTypeScriptCSSAccessibilityTokens
Left content
Jane Doe
Product Engineer
ReactTypeScriptDesign Systems
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
row | boolean | 'sm' | 'md' | 'lg' | 'xl' | — | No | Switch to row direction. A breakpoint value makes it row only at that width and above. |
wrap | boolean | false | No | Allow items to wrap to new lines |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | — | No | Gap between items |
align | Responsive<'start' | 'center' | 'end' | 'stretch' | 'baseline'> | — | No | Cross-axis alignment. Accepts a string or { base, sm, md, lg, xl } object. |
justify | Responsive<'start' | 'center' | 'end' | 'between'> | — | No | Main-axis justification. Accepts a string or { base, sm, md, lg, xl } object. |
Accessibility
- Renders a plain <div> — no ARIA roles needed
- Flex layout is purely visual and does not affect accessibility tree