CSS align-content Property
Pack lines toward the center of the flex container:
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.
|Animatable:||no. Read about animatable|
The numbers in the table specify the first browser version that fully supports the property.
|stretch||Default value. Lines stretch to take up the remaining space||Demo ❯|
|center||Lines are packed toward the center of the flex container||Demo ❯|
|flex-start||Lines are packed toward the start of the flex container||Demo ❯|
|flex-end||Lines are packed toward the end of the flex container||Demo ❯|
|space-between||Lines are evenly distributed in the flex container||Demo ❯|
|space-around||Lines are evenly distributed in the flex container, with half-size spaces on either end||Demo ❯|
|space-evenly||Lines are evenly distributed in the flex container, with equal space around them||Demo ❯|
|initial||Sets this property to its default value. Read about initial|
|inherit||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:
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