align-content

The align-content property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis.

CSS3

Syntax

align-content: flex-start | flex-end | center | space-between | space-around | stretch
Initial: stretch
Applies To: multi-line flex containers
Inherited: no
Media: visual

Values

align-content: value
Value Initial Description
center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of empty space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)
flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.
flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.
space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to 'center'. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to 'flex-start'. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same.
stretch stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to 'flex-start'. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

DOM

object.style.alignContent = "value";

Example | center

Example | flex-end

Example | flex-start

Example | space-around

Example | space-between

Example | stretch

Example | DOM

External

W3C CSS Flexible Box Layout Module Level 1