Stack
Beta notice: This page is being built.Edit on GitHub(opens in new tab)
Arranges View content using the LongLink spacing scale.
Example
Properties
| Stack - Properties |
|---|
children Stack content.ReactNode |
width Container width; numbers are pixels and strings are CSS sizes.string | number |
height Container height; numbers are pixels and strings are CSS sizes.string | number |
maxWidth Maximum container width; numbers are pixels and strings are CSS sizes.string | number |
minHeight Minimum container height; numbers are pixels and strings are CSS sizes.string | number |
gap Spacing between items.0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 |
padding Inner padding using the spacing scale.0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 |
paddingInline Horizontal padding, overriding padding on the inline axis.0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 |
paddingBlock Vertical padding, overriding padding on the block axis.0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 |
background Optional muted surface background; omitted stacks remain transparent."muted" |
direction Horizontal or vertical layout direction."horizontal" | "vertical" |
justify Main-axis alignment."start" | "center" | "end" | "between" | "around" | "evenly" |
align Cross-axis alignment alias. Mirrors CSS align-items."start" | "center" | "end" | "stretch" |
wrap Flex wrap behavior."nowrap" | "wrap" | "wrap-reverse" |
| StackItem - Properties |
|---|
children Content rendered inside the stack item.ReactNode |
size "fill" | "static" |
isScrollable boolean |
crossAlignSelf Overrides this item's cross-axis alignment; omitted values inherit the parent alignment."start" | "center" | "end" | "stretch" |