CSS align-content Property
Pack lines toward the center of the flex container:
Try it Yourself »
border: 1px solid #c3c3c3;
More "Try it Yourself" examples below.
Definition and Usage
align-content property specifies how flex lines are distributed along the cross axis in a flexbox container.
In flexbox layout, the main axis is in the
flex-direction (default is 'row', horizontal), and the cross axis is perpendicular to the main axis (default is 'column', vertical).
Tip: Use the
justify-content property to align the items on the main axis (horizontally).
align-content property can also be used on a grid container to align grid items in the block direction. For pages in English, block direction is downward and inline direction is left to right.
|no. Read about animatable
|object.style.alignContent="center" Try it
The numbers in the table specify the first browser version that fully supports the property.
|Default value. Lines stretch to take up the remaining space
|Lines are packed toward the center of the flex container
|Lines are packed toward the start of the flex container
|Lines are packed toward the end of the flex container
|Lines are evenly distributed in the flex container
|Lines are evenly distributed in the flex container, with half-size spaces on either end
|Lines are evenly distributed in the flex container, with equal space around them
|Sets this property to its default value. Read about initial
|Inherits this property from its parent element. Read about inherit
Example with grid
All items are positioned at the end of the grid container, in the block direction:
Try it Yourself »
CSS tutorial: CSS flexbox
CSS tutorial: CSS grid
CSS Reference: align-items property
CSS Reference: align-self property
CSS Reference: justify-content property
HTML DOM reference: alignContent property