Align Content

Atomic props for controlling how rows are positioned in multi-row flex and grid containers.

Atomic Props	CSS Properties
alignContent={value}	align-content: {value};

Start

Use alignContent="flex-start" to pack rows in a container against the start of the cross axis.

Result

Loading...

Live Editor

<Box bgOrange100 w-350 h-280 row alignContent="flex-start" flexWrap="wrap"> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> </Box>

<Box bgOrange100 w-350 h-280 row alignContent="flex-start" flexWrap="wrap">
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
</Box>

Center

Use alignContent="center" to pack rows in a container in the center of the cross axis.

Result

Loading...

Live Editor

<Box bgOrange100 w-350 h-320 row alignContent="center" flexWrap="wrap"> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> </Box>

<Box bgOrange100 w-350 h-320 row alignContent="center" flexWrap="wrap">
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
</Box>

End

Use alignContent="flex-end" to pack rows in a container against the end of the cross axis.

Result

Loading...

Live Editor

<Box bgOrange100 w-350 h-320 row alignContent="flex-end" flexWrap="wrap"> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> </Box>

<Box bgOrange100 w-350 h-320 row alignContent="flex-end" flexWrap="wrap">
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
</Box>

Space between

Use alignContent="space-between" to distribute rows in a container such that there is an equal amount of space between each line.

Result

Loading...

Live Editor

<Box bgOrange100 w-350 h-320 row alignContent="space-between" flexWrap="wrap"> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> </Box>

<Box bgOrange100 w-350 h-320 row alignContent="space-between" flexWrap="wrap">
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
</Box>

Space evenly

Use alignContent="space-evenly" to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around.

Result

Loading...

Live Editor

<Box bgOrange100 w-350 h-320 row alignContent="space-evenly" flexWrap="wrap"> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> </Box>

<Box bgOrange100 w-350 h-320 row alignContent="space-evenly" flexWrap="wrap">
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
</Box>

Space around

Use alignContent="space-around" to distribute rows in a container such that there is an equal amount of space around each line.

Result

Loading...

Live Editor

<Box bgOrange100 w-350 h-320 row alignContent="space-around" flexWrap="wrap"> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> <Box m2 bgOrange400 square-100></Box> </Box>

<Box bgOrange100 w-350 h-320 row alignContent="space-around" flexWrap="wrap">
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
  <Box m2 bgOrange400 square-100></Box>
</Box>