BankaiFlex
A polymorphic flexbox container. Props reflect as data-bankai-* and gap rides a custom property, styled by zero-specificity :where() theme rules — so a consumer's utility classes override without !important.
Example
justify="between" · gap="4"
123
direction="column" · gap="2"12
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | HTML tag name | 'div' | Element to render as. Polymorphic — any HTML tag name. |
direction | 'row' | 'row-reverse' | 'column' | 'column-reverse' | — | flex-direction. Omitted from the style when unset (browser default row applies). |
align | 'start' | 'end' | 'center' | 'baseline' | 'stretch' | (string) | — | Cross-axis alignment (align-items). A short keyword (BankaiFlexAlign) reflects as data-bankai-align; any other string is a verbatim align-items value. Omitted when unset. |
justify | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | (string) | — | Main-axis distribution (justify-content). A short keyword (BankaiFlexJustify) reflects as data-bankai-justify; any other string is a verbatim justify-content value ('space-between', 'flex-start', 'var(--x)'). Omitted when unset. |
gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string | — | Spacing between children (gap). A named t-shirt step ('xs'–'xl', --bankai-gap-<name>) or a number/bare-numeric string (a rem-based --bankai-space-<n> step); any other string is a verbatim CSS length ('1rem', 'clamp(…)', 'var(--x)'). Omitted when unset. |
wrap | 'nowrap' | 'wrap' | 'wrap-reverse' | — | flex-wrap. Omitted when unset (browser default nowrap applies). |
inline | boolean | false | Render as inline-flex instead of flex. |
Emits
This component emits no events.
Slots
| Slot | Description |
|---|---|
default | Flex children. |
Exposes
This component exposes nothing on its instance.
Theming
This component defines no theme tokens — its styling is driven by props and utility classes.