CSS align-content Property

Example

Pack lines toward the center of the flex container:

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    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.

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

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

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	12.0	11.0	28.0	9.0 7.0 -webkit-	12.1

CSS Syntax

Property Values

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