CSS align-contentProperty

Example

Align the items of a flexbox <div> element:

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

Browser Support

The numbers in the table specify the first browser version that supports the property.

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that supported the prefixed property.

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

Definition and Usage

The align-content property aligns the items inside a flex container when the items do not occupy all the available space on the cross-axis (vertically).

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

Note:The container must have multiple lines of items for this property to render an effect.

Default value:	stretch
Inherited:	no
Animatable:	No. SeeAnimatable (animatable)。
version:	CSS3
JavaScript Syntax:	object.style.alignContent="center" Try it Yourself

CSS Syntax

Default value

Value	Description	Testing
stretch	Default value. Items are stretched to fit the container. Lines stretch to take up the remaining space. If the remaining space is negative, this value is equivalent to 'flex-start'. In other cases, the remaining space is divided equally among all lines, enlarging their cross size.	Test »
center	The element is at the center of the container. Lines are packed toward the middle of the flex container. The lines are flush with each other and aligned in the center of the flex container, keeping the distance between the cross-start content edge of the flex container and the first line equal to the distance between the cross-end content edge of the flex container and the last line. (If the remaining space is negative, the lines will overflow in both directions by an equal distance.)	Test »
flex-start	The element is at the start of the container. each Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is flush with the cross-start edge of the flex container, and each subsequent line is flush with the preceding line.	Test »
flex-end	The element is at the end of the container. Lines are packed toward the end of the flex container. The cross-end edge of the last line in the flex container is flush with the cross-end edge of the flex container, and each subsequent line is flush with the preceding line.	Test »
space-between	Items are placed in the container with blank space left between the lines. Lines are evenly distributed in the flex container. If the remaining space is negative or there is only one line in the flex container, this value is equivalent to 'flex-start'. In other cases, the cross-start edge of the first line is flush with the cross-start content edge of the flex container, the cross-end edge of the last line is flush with the cross-end content edge of the flex container, and the remaining lines are arranged in the flex container in a way that keeps the space between them equal.	Test »
space-around	Items are placed in the container with blank space before, between, and after the lines. Lines are evenly distributed in the flex container, with half of the spacing between items reserved at both ends. If the remaining space is negative or there is only one line in the flex container, this value is equivalent to 'center'. In other cases, the lines are arranged in the flex container in a way that keeps the space between them equal, while the space before the first line and after the last line is half the other spaces.	Test »
initial	Sets this property to its default value. Seeinitial。	Test »
inherit	Inherits this property from the parent element. Seeinherit。

CSS Reference Manual:align-items Property

CSS Reference Manual:align-self property

CSS Reference Manual:justify-content property

CSS Reference

other extensions