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 »
Definition and Usage
The align-content property modifies the behavior of the
flex-wrap property. It is similar to
align-items, but
instead of aligning flex items, it aligns flex lines.
Note: There must be multiple lines of items for this property to have any effect!
Tip: Use the justify-content property to align the items on the main-axis (horizontally).
| 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.
Numbers followed by -webkit- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- |
12.1 |
CSS Syntax
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| stretch | Default value. Lines stretch to take up the remaining space | Play it » |
| center | Lines are packed toward the center of the flex container | Play it » |
| flex-start | Lines are packed toward the start of the flex container | Play it » |
| flex-end | Lines are packed toward the end of the flex container | Play it » |
| space-between | Lines are evenly distributed in the flex container | Play it » |
| space-around | Lines are evenly distributed in the flex container, with half-size spaces on either end | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS Reference: align-items property
CSS Reference: align-self property
CSS Reference: justify-content property
HTML DOM reference: alignContent property
