CSS 'align-content' Property Explained

The CSS 'align-content' property is used in flexbox and grid layouts to control the alignment of flex or grid rows within the container when there is extra space along the cross-axis. In simpler terms, if a flex or grid container has more space along the cross axis (flex) or block axis (grid) than its rows need, align-content determines how those rows are packed or spaced out. In a horizontal writing mode with flex-direction: row, that axis is vertical; with flex-direction: column it is horizontal. In flexbox it only has an effect on multi-line containers (flex-wrap: wrap or wrap-reverse); a single-line flex container ignores it.

CSS 'align-content' Property Examples

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

The 'align-content' property gives you fine control over the alignment and spacing of rows in flexible and grid layouts, making it easier to create responsive and aesthetically pleasing designs.

Browser Support For 'align-content' 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-content for the full compatibility details, including mobile browsers.

CSS Syntax of the 'align-content' Property

align-content: normal | stretch | center | start | end | flex-start | flex-end | space-between | space-around | space-evenly | initial | inherit;

Usage of the 'align-content' Property

This property is useful when working with multi-line flex containers (those with flex-wrap set to wrap) or grid containers, and you want to specify how rows are aligned in the container when extra space is available. Rows and columns swap roles when flex-direction is column or the writing mode is vertical, because the alignment follows the cross axis, not a fixed physical direction. It allows you to add space around items, spread them out evenly, or align them to one side of the container, among other options.

Property Values of the 'align-content' Property

• Normal: The initial value. In a flex container it behaves as stretch, so lines stretch to take up the remaining space. In other layouts it behaves as the layout's default alignment, so content is packed as if align-content were not set.
• Stretch: Lines with an automatic size grow equally to take up the remaining space.
• Start and End: Lines are packed against the start or end edge of the container, following the writing mode.
• Center: Lines are packed toward the center of the flex container.
• Flex-start: Lines are packed at the start of the flex container.
• Flex-end: Lines are packed at the end of the flex container.
• Space-between: Lines display with equal spacing between them.
• Space-around: Lines display with equal spacing around them.
• Space-evenly: Lines display with equal spacing around and between them.
• Initial: Sets this property to its initial value, normal.
• Inherit: Inherits this property from its parent element.