Flex
A flexbox layout primitive with direction, alignment, gap and wrap — plus a companion ZyraFlexItem for per-child grow/shrink/basis/order control.
1
2
3
API
All inputs and configuration options for zyra-flex.
| Prop | Type | Default | Description |
|---|---|---|---|
direction | FlexDirection | FlexResponsiveDirection | 'row' | Flex direction, or a { base, sm, md, lg, xl } breakpoint map |
align | FlexAlign | 'stretch' | align-items |
justify | FlexJustify | 'start' | justify-content |
gap | BoxSpacing | FlexResponsiveGap | 'none' | Gap, or a responsive breakpoint map |
wrap / wrapReverse | boolean | false | flex-wrap: wrap / wrap-reverse |
inline | boolean | false | Uses inline-flex instead of flex |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Purely visual layout — doesn’t change the tab order of projected content