align-items: cross-axis alignment

How items align across the cross axis

For a default flex row (main axis horizontal):

.container { display: flex; }
.container { align-items: stretch; }     /* default — items fill the cross-axis (match heights) */
.container { align-items: flex-start; }  /* all at the top */
.container { align-items: flex-end; }    /* all at the bottom */
.container { align-items: center; }      /* all vertically centered */
.container { align-items: baseline; }    /* text baselines aligned (typography) */

Vertical centering, finally solved

The pre-flexbox era required 5 different hacks to vertically center an element. Now:

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

That centers content both horizontally AND vertically within a full-viewport hero. CSS hadn't been able to do this cleanly for 20 years.

baseline — typography pro move

When you have items of different font-sizes side-by-side and want the TEXT BASELINES to align (not the box tops), use align-items: baseline:

.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-row .big { font-size: 48px; }
.price-row .small { font-size: 16px; }

The big "$" and small "/mo" share a baseline. Aligned tops would look ugly.