Attribute ng align-content ng CSS

Definition and Usage

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

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

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

See Also:

CSS Tutorial:CSS Flexbox

CSS Tutorial:CSS Grid

CSS Reference Manual:align-items Attribute

CSS Reference Manual:align-self Attribute

CSS Reference Manual:justify-content Attribute

HTML DOM Reference Manual:alignContent Attribute

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 beginning 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, each taking up half at both ends.
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