CSS align-content Property

Definition and Usage

align-content Attribute Modification flex-wrap The behavior of the property. It is related to align-items Similar, but it does not align flexible items, instead it aligns flexible lines.

Note:There must be multiple lines of items for this property to take effect!

Tip:Usage justify-content This property aligns items horizontally on the main-axis.

See Also:

CSS Tutorial:CSS Flexbox

CSS Tutorial:CSS Grid

CSS Reference Manual:align-items Property

CSS Reference Manual:align-self Property

CSS Reference Manual:justify-content Property

HTML DOM Reference Manual:alignContent Property

Example

Pack the lines to the center of the flexible container:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
stretch Default Value. The lines stretch to occupy the remaining space.
center Pack the lines towards the center of the flexible container.
flex-start Pack the lines towards the start of the flexible container.
flex-end Pack the lines towards the end of the flexible container.
space-between The lines are evenly distributed in the flexible container.
space-around The lines are evenly distributed in the flexible container, with each end taking up half.
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
Inheritance: No
Animation Production: Not Supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.alignContent="center"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0