The align-content property is a sub-property of the Flexible Box Layout module. It helps to align a flex container’s lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line.

The align-content property accepts 6 different values:

• flex-start: lines packed to the start of the container
• flex-end: lines packed to the end of the container
• center: lines packed to the center of the container
• space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
• space-around: lines evenly distributed with equal space between them
• stretch (default): lines stretch to take up the remaining space

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6