CSS Almanac → Properties → A → align-content

align-content

34 Cross on Apr 19, 2025

The align-content property is a sub-property of the Flexible Box Layout module.

It helps to align a flex container’s lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Note, this property has no effect when the flexbox has only a single line.

The align-content property accepts 6 different values:

flex-start: lines packed to the start of the container
flex-end: lines packed to the end of the container
center: lines packed to the center of the container
space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: lines evenly distributed with equal space between them
stretch (default): lines stretch to take up the remaining space

The following figure helps understand how the lines are stacked up in a flex container depending on the align-content value:

Syntax

align-content: flex-start | flex-end | center | space-between | space-around | stretch

.flex-container {
  align-content: space-around;
}

Demo

The following demo shows how lines are stacked out depending on the align-content value:

The red list is set to flex-start
The yellow list is set to flex-end
The blue list is set to center
The green list is set to space-between
The pink list is set to space-around
The brown list is set to stretch

Browser support

This is support for Flexbox as a whole, which should be the same as this property, since it’s kind of an original property as it were.

For more information about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).