CSS align-content property

The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present. 

List of align-content property values:

• center
• stretch
• flex-start
• flex-end
• space-around
• space-between
• start
• end
• normal
• baseline, first baseline, last baseline
• space-evenly
• safe
• unsafe

Description of property value with example:

center: Displays the flex lines at the center of the flex container.

Syntax:

align-content:center;

Example:

Output:

👁 align content center

stretch: The line stretched to take the remaining space of flex container. It is the default value.

Syntax:

align-content: stretch;

Example:

Output:

👁 align content stretch

flex-start: Displays the lines at the start of the flex container.

Syntax:

align-content: flex-start;

Example:

Output:

👁 align-content flex-start

flex-end: Displays the flex lines at the end of the flex container

Syntax:

align-content: flex-end;

Example:

Output:

👁 align-content flex-end

space-around: By using space-around property space will be distributed equally around the flex lines.

Syntax:

align-content: space-around;

Example:

Output:

👁 align-content space-around

space-between: Displays the flex lines with equal space between them.

Syntax:

align-content: space-between;

Example:

Output:

👁 align-content space between

Supported browser: The browser supported by CSS | align-content property are listed below:

• Google Chrome 29.0 and above
• Edge 12.0 and above
• Internet Explorer 11.0 and above
• Firefox 28.0 and above
• Opera 12.1 and above
• Safari 9.0 and above