align-content

Specifies the alignment between the lines inside a flexible container when the items do not use all available space

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

CSS Syntax

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Value Description
stretch Default value. Lines stretch to take up the remaining space
center Lines are packed toward the center of the flex container
flex-start Lines are packed toward the start of the flex container
flex-end Lines are packed toward the end of the flex container
space-between Lines are evenly distributed in the flex container
space-around Lines are evenly distributed in the flex container, with half-size spaces on either end
space-evenly Lines are evenly distributed in the flex container, with equal space around them
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

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

Tip: Use the justify-content property to align the items on the main-axis (horizontally).

Default value: stretch
Inherited: no
Animatable: no
Version: CSS3
JavaScript syntax: object.style.alignContent=“center”

Mar 22, 2022

Related Resources

How to Use CSS Math Functions
Easy Dark Mode CSS Trick
Morphing Background Shapes on Scroll
Timedropper a jQuery UI timepicker
Grid Loading Animations