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 |
Tokens
CSS custom properties zyra-flex reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Border--zyra-color-border-color | var(--zyra-color-border) | Border color shown when the border input is enabled. |
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