align-content

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

Examples

Start

Use content-start to pack rows in a container against the start of the cross axis:

Center

Use content-center to pack rows in a container in the center of the cross axis:

End

Use content-end to pack rows in a container against the end of the cross axis:

Space between

Use content-between to distribute rows in a container such that there is an equal amount of space between each line:

Space around

Use content-around to distribute rows in a container such that there is an equal amount of space around each line:

Space evenly

Use content-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:

Stretch

Use content-stretch to allow content items to fill the available space along the container’s cross axis:

Normal

Use content-normal to pack content items in their default position as if no align-content value was set:

Responsive design