Tailwind CSS · Utilities reference · all subjects

align-self

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-self utility classes

The align-self utilities control how an individual flex or grid item is positioned along its container's cross axis. The available utilities are: self-auto (align-self: auto), self-start (align-self: flex-start), self-end (align-self: flex-end), self-end-safe (align-self: safe flex-end), self-center (align-self: center), self-center-safe (align-self: safe center), self-stretch (align-self: stretch), self-baseline (align-self: baseline), and self-baseline-last (align-self: last baseline).

self-auto utility

The self-auto utility applies align-self: auto and aligns an item based on the value of the container's align-items property.

self-start utility

The self-start utility applies align-self: flex-start and aligns an item to the start of the container's cross axis, regardless of the container's align-items value.

self-end utility

The self-end utility applies align-self: flex-end and aligns an item to the end of the container's cross axis, regardless of the container's align-items value.

self-end-safe utility

The self-end-safe utility applies align-self: safe flex-end, combining the safe keyword with flex-end alignment.

self-center utility

The self-center utility applies align-self: center and aligns an item along the center of the container's cross axis, regardless of the container's align-items value.

self-center-safe utility

The self-center-safe utility applies align-self: safe center, combining the safe keyword with center alignment.

self-stretch utility

The self-stretch utility applies align-self: stretch and stretches an item to fill the container's cross axis, regardless of the container's align-items value.

self-baseline utility

The self-baseline utility applies align-self: baseline and aligns an item such that its baseline aligns with the baseline of the flex container's cross axis.

self-baseline-last utility

The self-baseline-last utility applies align-self: last baseline and aligns an item along the container's cross axis such that its baseline aligns with the last baseline in the container. This is useful for ensuring that text items align with each other, even if they have different heights.

align-self responsive variants

The align-self utilities support responsive design variants. The default class is self-auto and a featured responsive example uses self-end.

Give your agent this brain