align-items in CSS: aligning on the cross axis without guessing the height

A flex container easily spreads its children out along the main axis, but what about the other direction, the one running perpendicular to it? Without align-items, a button taller than its neighbors would overflow or break the visual alignment of an entire row. This property solves exactly that problem.

It shows up in almost every flex layout: vertically centering a logo next to some text, lining up icons of different sizes on the same row, or stretching cards so they all share the same height inside a row.

Definition

align-items is the property that aligns the items inside a Flexbox container along its cross axis, the one perpendicular to the main axis set by flex-direction. Like justify-content, it gets set on the container, never directly on the children.

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

On a row-based container, that declaration vertically centers every flex item, regardless of each one's own height.

The five values

stretch, the default value, often surprises beginners: without asking for anything, every flex item already stretches to fill the container's available height, as long as no height gets forced on it explicitly.

A concrete example

A row of pricing cards, with titles and descriptions of different lengths, shows off exactly what stretch is good for.

.card-row {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

Every card automatically stretches to match the tallest one in the row, with no fixed height ever calculated in JavaScript or hardcoded into the CSS.

baseline, the most misunderstood value

baseline aligns items along the invisible line text rests on, the one letters like a or n sit right on top of, ignoring descenders on letters like g or p. It earns its keep when items with different font sizes need to look like they sit on the same line.

.label {
  display: flex;
  align-items: baseline;
}

Without baseline, a large number next to a small caption would look vertically off, even though both items technically sit on the same row of the flex container.

The forced-height pitfall

align-items: stretch can only stretch items whose height is not already fixed. A child with an explicit height in CSS, or content that forces its own size like an image with no flexible dimension, simply ignores the stretch entirely.

Frequently asked questions

Yes, and that is actually their most common pairing. align-items sets a default rule for every child in the container, while align-self overrides it for one specific child. That combination avoids repeating an alignment value on every item when only one particular case needs to differ.

The most common cause: the container itself has no defined height, or its height exactly matches its content, in which case there is no extra vertical space left to distribute. align-items needs a container taller than its children to produce any visible effect.

Yes, the property also exists in a grid context, where it aligns each cell's content inside its area if that area is larger than the content. The principle stays the same: acting on the axis perpendicular to the layout's main direction.