Propriété align-content CSS

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 the flex items, but aligns the flex lines.

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

Tip:Use justify-content The property aligns items horizontally on the main-axis.

See also:

CSS Tutorial:Flexbox CSS

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 flex 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 flex container.
flex-start Pack the lines towards the start of the flex container.
flex-end Pack the lines towards the end of the flex container.
space-between The lines are evenly distributed in the flex container.
space-around The lines are evenly distributed in the flex 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 creation: 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