Stack
stable 0.5 kB<hk-stack>Flex row or column with token-driven gaps. The layout primitive you reach for before writing another one-off flex utility.
#flex#spacing
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| direction | 'row' | 'column' | 'column' | Main axis. |
| gap | string | '0.5rem' | Space between children. |
| align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Cross-axis alignment. |
| justify | 'start' | 'center' | 'end' | 'between' | 'start' | Main-axis distribution. |
| wrap | boolean | false | Allows children to wrap. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-stack-gap | 0.5rem | Default gap when none is passed. |
Accessibility
- Purely presentational: it adds no roles and does not disturb the reading order of its children.