# Flex
> Generated from flex.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `gap` | small | middle | large | number | `0` | Space between items — named DS step (8/16/24) or a raw pixel number |
| `vertical` | boolean | `false` | Stack in a column — AntD's boolean shorthand for direction=column (direction wins if both set) |
| `direction` | row | row-reverse | column | column-reverse | `row` | Main-axis direction (flex-direction) — the full matrix; overrides `vertical` |
| `align` | start | center | end | baseline | stretch | `stretch` | Cross-axis alignment (align-items) |
| `justify` | start | center | end | space-between | space-around | space-evenly | `start` | Main-axis distribution (justify-content) |
| `wrap` | boolean | `false` | Allow items to wrap onto multiple lines |

## Visual standard (measured)
- Display: flex
- Gap scale: small 8 · middle 16 · large 24 (or a raw px number)
- Direction: row · row-reverse · column · column-reverse (or `vertical` for column)
- Align: start · center · end · baseline · stretch (align-items)
- Justify: start · center · end · space-between/around/evenly

## When to use
- **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

Keep gaps on the named scale (small/middle/large) so spacing stays consistent across surfaces — reach for a raw pixel number only for a genuine one-off. Flex is layout, never decoration: it paints no background.