CSS align-content property

Example

Pack lines toward the center of the flex container:

div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}

Definition and Usage

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

flex-wrap with value wrap will wrap the flex items to the next line.

align-content will align all the flex items group (flex lines) vertically.

Note: There must be multiple lines of items for this property to have any effect!

Tip: Use the justify-content property to align the items on the main-axis (horizontally).

Default value: stretch
Inherited: no
Animatable: no.
Version: CSS3
JavaScript syntax: object.style.alignContent="center"

  • Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
  • object - object in javascript means the element on which align-content is applied.
  • Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property          
align-content
21.0
11.0
28.0
9.0
7.0 -webkit-
12.1

CSS Syntax

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

Property Values

Value Description Demo
stretch Default value. Lines stretch to take up the remaining space
center Lines are packed toward the center of the flex container
flex-start Lines are packed toward the start of the flex container
flex-end Lines are packed toward the end of the flex container
space-between Lines are evenly distributed in the flex container
space-around Lines are evenly distributed in the flex container, with half-size spaces on either end
space-evenly Lines are evenly distributed in the flex container, with equal space around them
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Comments