CSS align-content property

CSS align-content property CSS reference manual

Definitions and usages

The align-content property aligns the items (vertically) within the container when the items in the elastic container do not occupy all available space on the cross axis.

Tip: Use the justify-content property to align the items (horizontal) on the spindle.

Note: There must be multiple lines of items in the container for the property to render the effect.

Default: stretch
Inherited: Whether
Animated: Whether. See Animation .
Version: CSS3
JavaScript syntax: object.style.alignContent="center"

CSS syntax 

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

The default

Value Describe Test
stretch The default. The item is stretched to fit the container. Testing . . .
center The project is located in the center of the container. Testing . . .
flex-start The item is at the beginning of the container. Testing . . .
flex-end The item is at the end of the container. Testing . . .
space-between The item is in a container with blank space between the lines. Testing . . .
space-around Items are located in containers that are blank before, between, and after each line. Testing . . .
initial Set the property to its default value. See initial . Testing . . .
inherit Inherit the property from the parent element. See inherit.

To align the elements of the elastic box:

div
{
display: flex;
flex-flow: row wrap;
align-content:space-around;
}

Try it out . . .

Browser support

The numbers in the table support the version number of the first browser for this property.

The number immediately after -webkit-, -ms - or -moz - is the first version that supports the prefix property.

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

Related articles

CSS Reference Manual: align-items property

CSS Reference Manual: align-self property

CSS Reference Manual: justify-content property


CSS align-content property CSS reference manual