align-content

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).

Other resources

• align-items in the spec
• align-items at MDN
• Advanced cross-browser flexbox
• A guide to Flexbox
• Using Flexbox
• Old Flexbox and new Flexbox

Related