Skip to main content

​
Overview

Align self utilities let you override the container’s items-* rule for a single child. Use them when one item needs a different vertical position than the rest of the row.
ClassCSS
.self-startalign-self: flex-start;
.self-centeralign-self: center;
.self-endalign-self: flex-end;
Responsive self-*--on-* variants are also shipped.

​
Self Start

.self-start pulls one item to the top of the cross axis while the rest of the row stays stretched or follows the container rule.

​
Self Center

.self-center vertically centers one item within the row while siblings follow the container alignment.

​
Self End

.self-end pushes one item to the bottom of the cross axis. This is useful for anchoring a specific element to the baseline of the container.

​
Best Practices

  • Keep self-* for targeted exceptions instead of setting the whole line differently.
  • Use it on one item that needs a different visual anchor within the row.
  • Keep the base container rule predictable with items-*, then layer self-* only where needed.

Align Items

Set the shared cross-axis rule for the container

Order

Reorder items when alignment alone is not enough