Style alignContent Property

Definition and Usage

When the items do not use all the available space on the horizontal axis (vertical),AlignContent Aligns the items of the elastic container property.

Tip:Use justifyContent Property Aligns items on the main axis (horizontal).

Note:There must be multiple lines of items to make this property effective.

Example

Place the items of the elastic <div> element between the two lines with space:

document.getElementById("main").style.alignContent = "space-between";

Try It Yourself

Syntax

Return the alignContent Property:

object.style.alignContent

Set the alignContent Property:

object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

Property Value

Value Description
stretch Default Value. The line stretches to occupy the remaining space.
center The items are located at the center of the container.
flex-start The items are located at the beginning of the container.
flex-end The items are located at the end of the container.
space-between The items are located between the lines with space.
space-around The line before, between, and after the items are all left blank.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: stretch
Return Value: A string that represents the element's align-content Property.
CSS Version: CSS3

Browser Support

AlignContent It is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Supported Supported Supported Supported Supported 11

Related Pages

CSS Reference Manual:align-content Property

HTML DOM STYLE Reference Manual:alignItems Property

HTML DOM STYLE Reference Manual:alignSelf Property

HTML DOM STYLE Reference Manual:justifyContent Property