CSS align-content Property
Example
Align the items of a <div> element in a flexbox:
div {
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers following -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.
| Property | Chrome | Edge | Firefox | IE | Safari |
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 <br>7.0 -webkit- | 12.1 |
Definition and Usage
The align-content property aligns the items within a flex container when the items do not use all available space on the cross axis (vertically).
Tip: Use the justify-content property to align items on the main axis (horizontally).
Note: The property has an effect only if there is more than one line of items.
| Default value: | stretch |
|---|---|
| Inherited: | no |
| Animatable: | no. See animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.alignContent="center" try it |
CSS Syntax
Default Value
| Value | Description | Demo |
|---|---|---|
| stretch | Default. Elements are stretched to fit the container. The lines stretch to take up the remaining space. If the leftover space is negative, this value is identical to 'flex-start'. Otherwise, the remaining space is shared equally among all lines, expanding their cross-axis size. | Demo » |
| center | Elements are centered in the container. The lines are packed toward the center of the flex container. The lines are flushed with each other and aligned in the center of the container, with equal space between the first and last lines and the container edges. | Demo » |
| flex-start | Elements are aligned at the start of the container. The lines are packed toward the start of the flex container. The first line's start edge is flush with the start edge of the container, and each subsequent line is flush with the preceding one. | Demo » |
| flex-end | Elements are aligned at the end of the container. The lines are packed toward the end of the flex container. The last line's end edge is flush with the end edge of the container, and each subsequent line is flush with the preceding one. | Demo » |
| space-between | Elements are evenly distributed in the container with spaces between the lines. The lines are evenly distributed in the flex container. If the leftover space is negative or there is only one line in the flex container, this value is identical to 'flex-start'. Otherwise, the lines are evenly distributed without space at either end. | Demo » |
| space-around | Elements are placed within a container that has space before, between, and after each row. Rows are evenly distributed in the flex container with half the space between the child elements at both ends. If the remaining space is negative or there is only one row in the flex container, this value is equivalent to 'center'. Otherwise, the rows are arranged in the flex container to maintain equal space between each pair of rows, with the space before the first row and after the last row being half of the other spaces. | Test » |
| initial | Sets this property to its default value. See initial | Test » |
| inherit | Inherits this property from its parent element. See inherit |
Related Articles
CSS Reference: align-items Property
CSS Reference: align-self Property
CSS Reference: justify-content Property