align-items

align-items sets the default alignment for the direct children of a flex or grid container. In Flexbox it uses the cross axis. In Grid it uses each item’s grid area’s block axis.

Smallest working example

Here the row is taller than its items, so their alignment is visible.

<div class="layout">
  <div>Short</div>
  <div class="tall">Tall text</div>
</div>

.layout {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 160px;
}
/* Optional presentation */
.layout {
  border: 1px solid #64748b;
}
.layout > div {
  padding: 8px;
  background: #dbeafe;
}
.tall {
  font-size: 2rem;
}

The items’ boxes are centered across the row. Change center to stretch or baseline: stretching changes the boxes’ cross sizes when they are automatic, while baseline aligns their text baselines.

Values and defaults

The initial value is normal and it is not inherited. In Flexbox, normal behaves like stretch. In Grid, items usually stretch, but items with intrinsic sizing or an aspect ratio can behave like start. start, end, center, stretch, and baseline are useful everyday values. safe center guards against clipping through unsafe centering.

A practical use

Use align-items: baseline on a price and its smaller currency label. Use center on a toolbar with differently sized controls. Set align-self on one child to override the group.

Why it may do nothing

There must be room along the relevant axis. An explicit cross-axis size can prevent stretching, and cross-axis auto margins on a flex item take precedence over alignment. flex-direction changes the cross axis. This property does not align the grid tracks themselves; align-content does that.

A second working case

<p class="price">
  <span class="amount">12</span><span>credits per workshop</span>
</p>

.price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.amount {
  font-size: 2.5rem;
}

Baseline alignment keeps the differently sized text on a shared baseline. Center would align the boxes’ centers instead.

Sources and browser support

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