Stack

Stack manages the layout of its children in one dimension (row or column) with consistent spacing.

Row (default)

Item 1

Item 2

Item 3

<me-stack spacing="2"> <me-paper elevation="1">Item 1</me-paper> <me-paper elevation="1">Item 2</me-paper> <me-paper elevation="1">Item 3</me-paper> </me-stack>

Column

Item 1

Item 2

Item 3

<me-stack direction="column" spacing="2"> ... </me-stack>

Spacing

Spacing is a multiplier of the base spacing unit (8px). spacing="1" = 8px, spacing="2" = 16px, etc. Any CSS value also works.

spacing="1" (8px)

spacing="3" (24px)

Alignment

align="center", justify="space-between"

Left

Center (tall)

Right

<me-stack direction="row" spacing="2" align="center" justify="space-between"> ... </me-stack>

API

Attribute	Type	Default	Description
`direction`	row \| row-reverse \| column \| column-reverse	row	Flex direction.
`spacing`	number \| CSS value	0	Gap between children. Numbers are multiplied by 8px.
`align`	flex-start \| flex-end \| center \| stretch \| baseline	center	Cross-axis alignment.
`justify`	flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly	flex-start	Main-axis justification.
`flex-wrap`	wrap \| nowrap \| wrap-reverse	nowrap	Wrapping behavior.