CSS align-content Property

❮ Previous Complete CSS Reference Next ❯

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;
}

Try it Yourself »

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.

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

Show demo ❯

Default value:	stretch
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.alignContent="center" Try it

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

Property Values

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