Skip to main content

Align Items

Atomic props for controlling how flex and grid items are positioned along a container's cross axis.

Atomic PropsCSS Properties
alignItems ={value}align-items: {value};

Start

Use alignItems="start" to align items to the start of the container's cross axis.

Result
Loading...
Live Editor

Center

Use alignItems="center" to align items along the center of the container's cross axis.

Result
Loading...
Live Editor

End

Use alignItems="flex-end" to align items to the end of the container's cross axis.

Result
Loading...
Live Editor

Baseline

Use alignItems="baseline" to align items along the container's cross axis such that all of their baselines align.

Result
Loading...
Live Editor

Stretch

Use alignItems="stretch" to stretch items to fill the container's cross axis.

Result
Loading...
Live Editor