Align Items

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

Atomic Props	CSS 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

<Box row gap4 alignItems="flex-start"> <Box bgOrange400 w-100 py4></Box> <Box bgOrange400 w-100 py8></Box> <Box bgOrange400 w-100 py6></Box> </Box>

<Box row gap4 alignItems="flex-start">
  <Box bgOrange400 w-100 py4></Box>
  <Box bgOrange400 w-100 py8></Box>
  <Box bgOrange400 w-100 py6></Box>
</Box>

Center

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

Result

Loading...

Live Editor

<Box row gap4 alignItems="center"> <Box bgOrange400 w-100 py4></Box> <Box bgOrange400 w-100 py8></Box> <Box bgOrange400 w-100 py6></Box> </Box>

<Box row gap4 alignItems="center">
  <Box bgOrange400 w-100 py4></Box>
  <Box bgOrange400 w-100 py8></Box>
  <Box bgOrange400 w-100 py6></Box>
</Box>

End

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

Result

Loading...

Live Editor

<Box row gap4 alignItems="flex-end"> <Box bgOrange400 w-100 py4></Box> <Box bgOrange400 w-100 py8></Box> <Box bgOrange400 w-100 py6></Box> </Box>

<Box row gap4 alignItems="flex-end">
  <Box bgOrange400 w-100 py4></Box>
  <Box bgOrange400 w-100 py8></Box>
  <Box bgOrange400 w-100 py6></Box>
</Box>

Baseline

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

Result

Loading...

Live Editor

<Box row gap4 alignItems="baseline"> <Box bgOrange400 w-100 py4></Box> <Box bgOrange400 w-100 py8></Box> <Box bgOrange400 w-100 py6></Box> </Box>

<Box row gap4 alignItems="baseline">
  <Box bgOrange400 w-100 py4></Box>
  <Box bgOrange400 w-100 py8></Box>
  <Box bgOrange400 w-100 py6></Box>
</Box>

Stretch

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

Result

Loading...

Live Editor

<Box row gap4 alignItems="stretch"> <Box bgOrange400 w-100 py4></Box> <Box bgOrange400 w-100 py8></Box> <Box bgOrange400 w-100 py6></Box> </Box>

<Box row gap4 alignItems="stretch">
  <Box bgOrange400 w-100 py4></Box>
  <Box bgOrange400 w-100 py8></Box>
  <Box bgOrange400 w-100 py6></Box>
</Box>