Tailwind CSS · Utilities reference · all subjects

align-content

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

align-content utilities reference

The align-content utilities control how rows are positioned in multi-row flex and grid containers. The available utilities are: content-normal (align-content: normal), content-center (align-content: center), content-start (align-content: flex-start), content-end (align-content: flex-end), content-between (align-content: space-between), content-around (align-content: space-around), content-evenly (align-content: space-evenly), content-baseline (align-content: baseline), and content-stretch (align-content: stretch).

content-normal class

The content-normal utility sets align-content: normal, packing content items in their default position as if no align-content value was set.

content-center class

The content-center utility sets align-content: center, packing rows in a container in the center of the cross axis.

content-start class

The content-start utility sets align-content: flex-start, packing rows in a container against the start of the cross axis.

content-end class

The content-end utility sets align-content: flex-end, packing rows in a container against the end of the cross axis.

content-between class

The content-between utility sets align-content: space-between, distributing rows in a container such that there is an equal amount of space between each line.

content-around class

The content-around utility sets align-content: space-around, distributing rows in a container such that there is an equal amount of space around each line.

content-evenly class

The content-evenly utility sets align-content: space-evenly, distributing rows in a container such that there is an equal amount of space around each item, accounting for the doubling of space that would normally be seen between each item when using content-around.

content-baseline class

The content-baseline utility sets align-content: baseline, aligning rows along their baseline in multi-row flex and grid containers.

content-stretch class

The content-stretch utility sets align-content: stretch, allowing content items to fill the available space along the container's cross axis.

align-content responsive variants

The align-content utilities support responsive design variants. You can prefix any align-content utility with a breakpoint prefix (like md:, lg:) to apply the utility only at specific screen sizes.

Give your agent this brain