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

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

Thealign-content property specifies how flex lines are distributed along the cross axis in a flexbox container.

In flexbox layout, the main axis is in theflex-direction (default is 'row', horizontal), and the cross axis is perpendicular to the main axis (default is 'column', vertical).

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

Note: Thealign-content property can also be used on a grid container to align grid items in the block direction. For pages in English, block direction is downward and inline direction is left to right.

Show demo ❯

Default value:	stretch
Inherited:	no
Animatable:	no.Read aboutanimatable
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.

Property
align-content	57.0	16.0	52.0	10.1	44.0

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 aboutinitial
inherit	Inherits this property from its parent element.Read aboutinherit