CSS 'align-items' Property Explained

The CSS 'align-items' property is a key player in Flexbox and Grid layouts, providing a way to align child elements (items) within their container. In flexbox it aligns items on the cross axis, which runs up and down in a horizontal writing mode when flex-direction is row, but runs left to right when flex-direction is column. In grid layout it aligns items on the block axis within their grid areas. It is especially noticeable when the items do not all have the same size along that axis.

CSS 'align-items' Property Examples

See the Pen CSS 'align-items' Property by Webzstore (@webzstore) on CodePen.

The Pen above is an external example. Baseline alignment (align-items: baseline) lines items up by the baseline of their content, which is particularly noticeable when text sizes differ.

Browser Support For 'align-items' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for align-items for the full compatibility details, including mobile browsers.

CSS Syntax of the 'align-items' Property

align-items: normal | stretch | flex-start | flex-end | start | end | center | baseline | initial | inherit;

Usage of the 'align-items' Property

You'd use 'align-items' to control the alignment of items along the cross axis of a flex container (or along the block axis for grid items in a grid container). In a typical row-direction flex container in a horizontal writing mode, that means vertical alignment; with flex-direction: column the cross axis is horizontal, and a vertical writing mode changes the physical directions again. The property is useful for consistent alignment among items that vary in size or to match a specific design requirement.

Property Values of the 'align-items' Property

• Normal: The initial value. Its behaviour depends on the layout: in a flex container it behaves as stretch; in a grid container it behaves like stretch, except for items that have an aspect ratio or intrinsic size, which behave as start.
• Stretch: Items that have an automatic size on the cross axis (for example height: auto in a row flex container) are stretched to fill the container's cross size, within their min and max size limits.
• Flex-start: (Flexbox only) Items are aligned to the cross-start edge of the flex container.
• Flex-end: (Flexbox only) Items are aligned to the cross-end edge of the flex container.
• Start and End: Items are aligned to the start or end edge of their alignment container, following the writing mode.
• Center: Items are centered on the cross axis (block axis in grid).
• Baseline: Items are aligned based on their baseline.
• Initial: Sets this property to its initial value, normal.
• Inherit: Inherits this property from its parent element.