Stack
Display elements vertically or horizontally on the page.
Name | Type | Description | Default |
|---|---|---|---|
children | ReactNodeNoStrings | Elements to lay out.. | - |
as | enum | Root element. | div |
gap | ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18> | Gap unit, increments of 4px. | - |
direction | ResponsiveProp<Direction> | Flexbox `flex-direction`. | column |
align | ResponsiveProp<Align> | Flexbox `align-items`. | stretch |
justify | ResponsiveProp<Justify> | Flexbox `justify-content`. | flex-start |
flex | string | number | Flexbox `flex`. | initial |
debug | boolean | Visualize the whitespace. | - |
className | string | Root element cvlass name. | - |
style | CSSProperties | Root element inline styles. | - |
Gap is a unit on a 4px grid scale.
Code Editor
Resize the window to observe changes to the layout.
Code Editor
Code Editor