align-content
Aligns 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.
It is documented as part of the CSS Box Alignment, CSS Flexible Box Layout specification.
Syntax
/* Usage Example */
.container {
display: flex;
flex-wrap: wrap;
height: 600px;
align-content: space-between;
/* distributes multiple rows throughout the height */
}
/* Syntax */
align-content: normal;
/* Global values */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: revert-layer;
align-content: unset;align-content Browser support
Widely available
Since
2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
29+
28+
9+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more