Flex / FlexItem
Markdown for agentsTyped flexbox container (direction/align/justify/wrap/gap) with FlexItem for per-child grow/shrink/basis controls.
npx slipstream-ui@latest add flexToolbar (between)
Document title
Sidebar + content (FlexItem)
Sidebar — basis 10rem, shrink-0
Content — grows to fill remaining space
wrap
items
flow to
the next
line
instead of
overflowing
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | 'row' | 'column' | 'row' | Main axis direction. |
| align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | — | Cross-axis alignment (align-items; align-self on FlexItem). |
| justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | — | Main-axis distribution (justify-content). |
| wrap | boolean | false | Allow items to wrap onto multiple lines. |
| gap | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Token gap between children. |
| as | 'div' | 'span' | 'section' | 'article' | 'nav' | 'header' | 'footer' | 'div' | Semantic element. |
| grow / shrink / basis | boolean | string / string | — | Per-child flex values on FlexItem — emitted as inline style so nothing gets purged. |
Accessibility
- Layout-only semantics: flex-wrap reflows visually while DOM (reading) order never changes.
- Interactive children keep their own keyboard/ARIA contracts.
- Put items in logical reading order regardless of visual layout.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.