utilities/justify-content

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

justify-content utility classes

Tailwind v4 provides the following justify-content utilities: justify-start (justify-content: flex-start), justify-end (justify-content: flex-end), justify-end-safe (justify-content: safe flex-end), justify-center (justify-content: center), justify-center-safe (justify-content: safe center), justify-between (justify-content: space-between), justify-around (justify-content: space-around), justify-evenly (justify-content: space-evenly), justify-stretch (justify-content: stretch), justify-baseline (justify-content: baseline), and justify-normal (justify-content: normal).

justify-start utility

The justify-start utility sets justify-content: flex-start and justifies flex and grid items against the start of the container's main axis.

justify-center and justify-center-safe utilities

The justify-center utility sets justify-content: center and justifies items along the center of the container's main axis. The justify-center-safe utility sets justify-content: safe center and will align items to the start of the container instead of the center when there is not enough space available.

justify-end and justify-end-safe utilities

The justify-end utility sets justify-content: flex-end and justifies items against the end of the container's main axis. The justify-end-safe utility sets justify-content: safe flex-end and will align items to the start of the container instead of the end when there is not enough space available.

justify-between utility

The justify-between utility sets justify-content: space-between and justifies items along the container's main axis such that there is an equal amount of space between each item.

justify-around utility

The justify-around utility sets justify-content: space-around and justifies items along the container's main axis such that there is an equal amount of space on each side of each item.

justify-evenly utility

The justify-evenly utility sets justify-content: space-evenly and justifies items along the container's main axis such that there is an equal amount of space around each item, accounting for the doubling of space seen with justify-around.

justify-stretch utility

The justify-stretch utility sets justify-content: stretch and allows auto-sized content items to fill the available space along the container's main axis.

justify-normal utility

The justify-normal utility sets justify-content: normal and packs content items in their default position as if no justify-content value was set.

justify-baseline utility

The justify-baseline utility sets justify-content: baseline.

Give your agent this brain