align-self

Utilities for controlling how an individual flex or grid item is positioned along its container

"Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.";

Examples

Auto

Use the self-auto utility to align an item based on the value of the container's align-items property:

Start

Use the self-start utility to align an item to the start of the container's cross axis, despite the container's align-items value:

Center

Use the self-center utility to align an item along the center of the container's cross axis, despite the container's align-items value:

End

Use the self-end utility to align an item to the end of the container's cross axis, despite the container's align-items value:

Stretch

Use the self-stretch utility to stretch an item to fill the container's cross axis, despite the container's align-items value:

Baseline

Use the self-baseline utility to align an item such that its baseline aligns with the baseline of the flex container's cross axis:

Last baseline

Use the self-baseline-last utility to align 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.

Responsive design