align-self in CSS: pulling one child out of the group's alignment

align-items sets an alignment rule for every child inside a flex or grid container, but sometimes a single item needs to break away from that shared rule: an avatar that should stay pinned to the top while the rest of the group centers, or a button that should sit at the bottom of a card while everything else floats in the middle. align-self answers exactly that need.

It comes up whenever a layout needs a one-off exception to an overall alignment rule, without creating an extra container or duplicating the group's styles just for one item.

Definition

align-self is the property that overrides, for a single item, the align-items value set on its parent container. It gets set directly on the child that needs different treatment, never on the container.

.container {
  display: flex;
  align-items: center;
}

.special-item {
  align-self: flex-start;
}

Every child in the container centers vertically, except .special-item, which stays pinned to the top, regardless of the shared rule set by align-items.

The accepted values

align-self accepts the same values as align-items, plus one extra value that only makes sense on an individual item.

auto is the default value, and that is exactly what makes align-self only take effect where it is explicitly declared: without this property, every child simply inherits the behavior set by align-items.

A concrete example

A profile card, with a centered photo and an action button always pinned to the bottom of the card, shows off align-self's typical use.

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-button {
  align-self: stretch;
  margin-top: auto;
}

Every bit of the card's content stays horizontally centered thanks to align-items, except the button, which stretches across the full width thanks to align-self: stretch, a behavior specific to that one item.

align-self also works with CSS Grid

On a CSS grid, align-self plays the same role: it aligns a CSS Grid cell's content inside its area, vertically, independent of the alignment set for other cells by align-items on the grid container.

.grid {
  display: grid;
  align-items: stretch;
}

.title-cell {
  align-self: start;
}

Here, every grid cell stretches vertically, except .title-cell, which stays pinned to the top of its area, with no need to modify the grid's structure itself.

The scope pitfall

align-self only takes effect inside a flex or grid context. Set on an item whose parent has neither display: flex nor display: grid, it produces strictly no visible effect at all, with no error or warning to flag it.

Frequently asked questions

No, align-self only acts on the container's cross axis. Full centering needs align-self paired with an adjustment on the main axis, often through a property like margin: auto applied to that specific item, or by rethinking the structure with justify-content on the whole container if every item should center the same way.

align-self always wins over align-items for the item it targets, with no exception. That is precisely its purpose: offering a targeted escape hatch from a general rule, with no need to work around the container or add an extra CSS class for a single special case.

No, only direct children of a flex or grid container become flex items or grid items, and align-self only applies to them. A grandchild, deeper in the tree, keeps its normal display behavior and simply ignores this property altogether.