align-self

align-self overrides the container’s align-items setting for one flex or grid item. It acts on the cross axis in Flexbox and on the block axis of a grid area in Grid.

Smallest working example

<div class="layout">
  <div>Default start</div>
  <div class="special">Only this ends</div>
</div>

.layout {
  display: flex;
  align-items: start;
  gap: 1rem;
  height: 160px;
}
.special {
  align-self: end;
}
/* Optional presentation */
.layout {
  border: 1px solid #64748b;
}
.layout > div {
  background: #dbeafe;
  padding: 8px;
}

Only the second item moves to the cross-end edge. Try center on .special.

Values and defaults

The initial value auto uses the parent’s align-items behavior; the property is not inherited. start, end, center, stretch, and baseline alignment are useful overrides. safe center can fall back toward the start when centering would lose content.

A practical use

Align a toolbar’s primary action differently from its other controls without introducing a wrapper. Put the declaration on the control itself, rather than on the toolbar.

Why it may do nothing

An ordinary block child does not acquire flex or grid alignment just because it has this property. Cross-axis auto margins override this alignment on a flex item. For stretching, the cross size must be automatic. For the whole group, use align-items.

A second working case

<div class="panel">
  <p>Instructions at the start</p>
  <p class="note">One note at the block end</p>
</div>

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  min-height: 10rem;
  padding: 1rem;
  background: #eff6ff;
}
.note {
  align-self: end;
}

The note overrides start alignment on the grid area’s block axis. Its sibling retains the container setting.

Sources and browser support

MDN: align-self describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.