align-items

Definition

align-items controls how a flex container positions its items along the cross axis — the vertical axis in a default row, the horizontal axis once flex-direction: column is set. Where the main axis is the direction items flow, the cross axis is perpendicular to it, and align-items decides where each item sits across that perpendicular direction.

It is the cross-axis companion to justify-content, which handles the main axis. Its default value, stretch, is why flex items in a row grow to share the tallest item's height automatically — a behavior you get for free and often want, but which surprises people the first time a short item mysteriously fills the row's full height.

Syntax

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

/* value: stretch | flex-start | center |
   flex-end | baseline */

Parameters

Only stretch changes an item's size; the other four values leave each item at its natural size and simply move it to a position on the cross axis. To override the container's choice for a single item, set align-self on that item.

Return value

The visual effect is the placement of items along the cross axis. With flex-start, center, or flex-end each item keeps its intrinsic size and is pinned to the top, middle, or bottom of the line; with baseline the items shift so their first lines of text align; and with stretch each auto-sized item is grown to span the full cross axis, producing the equal-height columns a row of cards usually wants.

• It positions items only on the cross axis; main-axis distribution is justify-content's job.
• stretch only grows items that have no explicit cross-axis size — a fixed height or width opts an item out.
• When flex-direction is column, the cross axis is horizontal, so align-items aligns items left-to-right.

Examples

Vertically center a row of items

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

Compare the alignment values

baseline: align items with different font sizes

baseline is the value the other four can't imitate. It ignores box tops and bottoms and instead lines up the *text baselines* of the items — the invisible line letters sit on. Give three items wildly different font sizes and baseline still keeps their text sitting on one straight line, which is exactly what you want for a price tag or a label-and-value pair.

Real-world card row: equal height from stretch

The default stretch is doing free work every day: a row of cards with different amounts of text still lines up to a single height, because each card grows to match the tallest. This is the everyday payoff of the cross-axis default.

Override one item with align-self

.row {
  display: flex;
  align-items: center;
}
.row .badge {
  align-self: flex-start;
}
/* every item is centred on the cross axis,
   but .badge alone jumps to the top */

Cross axis flips in a column

Browser & runtime support

align-items is part of the CSS Flexible Box Layout module and is available in every current browser without prefixes for modern targets. It also applies to CSS Grid containers, where it aligns grid items within their tracks along the block axis, so the same cross-axis intuition transfers between the two layout systems you reach for most often.

Two related properties round out cross-axis control. align-self, set on an individual item, overrides the container's align-items for that one item — handy when a single badge should sit at the top of a row while the rest stay centered. align-content, by contrast, only takes effect in a *wrapping* flex container with more than one line: it distributes the lines themselves along the cross axis, the way justify-content distributes items along the main axis. Keep the three straight — align-items aligns items within a line, align-self overrides one item, and align-content spaces multiple lines — and cross-axis layout stops being guesswork.

Frequently asked questions

What is the default value of align-items?

The default is stretch, which grows auto-sized flex items to fill the container's cross axis — this is why a row of items becomes equal height automatically.

How do I vertically center items in a flex row?

Set align-items: center on the flex container. In a default row the cross axis is vertical, so this centers the items top-to-bottom.

Why is my flex item stretching to full height?

Because align-items defaults to stretch, and the item has no explicit cross-axis size. Give it a fixed height, or set align-items (or align-self on that item) to flex-start, center, or flex-end.