## Flex
A flexbox container with the DS spacing scale baked into `gap` — direction, align, justify, wrap.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-flex> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- gap: small | middle | large | number, default 0. Space between items — named DS step (8/16/24) or a raw pixel number
- vertical: boolean, default false. Stack in a column — AntD's boolean shorthand for direction=column (direction wins if both set)
- direction: row | row-reverse | column | column-reverse, default row. Main-axis direction (flex-direction) — the full matrix; overrides `vertical`
- align: start | center | end | baseline | stretch, default stretch. Cross-axis alignment (align-items)
- justify: start | center | end | space-between | space-around | space-evenly, default start. Main-axis distribution (justify-content)
- wrap: boolean, default false. Allow items to wrap onto multiple lines
Tokens: text-default.
Use when: Flex (arranging a block of items in one dimension with consistent DS spacing); Grid (you need two-dimensional rows-and-columns, not a single flow); Space (you only need even gaps between a small inline set of items).