CSS align-content Property
Example
Pack lines toward the center of the flex container:
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The 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).
Note: The 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.
| Default value: | stretch |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.alignContent="center" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| align-content | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
CSS Syntax
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| 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 |
More Examples
Example with grid
All items are positioned at the end of the grid container, in the block direction:
#container {
display: grid;
align-content: end;
}
Try it Yourself »
Related Pages
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
