CSS align-items Property: Align Flex and Grid Items on the Cross Axis

Defines the default behavior for how items are aligned along the cross axis (perpendicular to the main axis) in a flex or grid container.

Quick example

.container {
  display: flex;
  align-items: center;
} /* centers items vertically in a row container */

Syntax

align-items: <alignment-keyword>

stretch

Items stretch to fill the container on the cross axis (respecting min/max constraints). This is the default for flex and grid.

flex-start

Items align to the start of the cross axis. In a row container, that is the top edge.

flex-end

Items align to the end of the cross axis. In a row container, that is the bottom edge.

center

Items center along the cross axis.

baseline

Items align so their text baselines sit on the same line. Useful when items have different font sizes.

Quick facts

Initial value

normal

Inherited

Applies to

Flex and grid containers

Animation type

discrete

Examples

Center items vertically in a row

.header {
  display: flex;
  align-items: center;
  height: 60px;
}

A classic use: vertically center a logo, nav, and buttons inside a fixed-height header.

Align text baselines across items

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

.price {
  font-size: 3rem;
}

.per-month {
  font-size: 1rem;
}

baseline lines up the bottom of the text characters even when font sizes differ, which looks more natural than center.

Stretch children to equal height

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

Default behavior. All cards become the same height as the tallest one, making row layouts look tidy without setting explicit heights.

align-items Browser Support

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

29+

20+

12+

Common pitfalls

Cross axis flips with flex-direction

When flex-direction is column, the cross axis is horizontal. align-items now controls horizontal alignment and justify-content controls vertical. Switch containers and the property meanings swap.

align-items only sets the default

align-items is the default for all items in the container. Individual items can override it with align-self. If an item is not aligning as expected, check for an align-self override.

stretch needs no fixed cross-axis size

stretch only works when the item does not have a fixed height (for row containers) or fixed width (for column containers). Setting height or width on the child defeats the stretch behavior.