align-content Property | CSS REf
Example
Pack lines toward the center of the flex container:
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
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.
| Default value: | stretch |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.alignContent=”center” Try it |
CSS Syntax
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
Property Values
| Value | Description | Example |
|---|---|---|
| stretch | Default value. Lines stretch to take up the remaining space | #main { border: 1px solid #000000; display: flex; flex-wrap: wrap; align-content:stretch; } |
| center | Lines are packed toward the center of the flex container | #main { border: 1px solid #000000; display: flex; flex-wrap: wrap; align-content:center; } |
| flex-start | Lines are packed toward the start of the flex container | #main { border: 1px solid #000000; display: flex; flex-wrap: wrap; align-content:flex-start; } |
| flex-end | Lines are packed toward the end of the flex container | #main { border: 1px solid #000000; display: flex; flex-wrap: wrap; align-content:flex-end; } |
| space-between | Lines are evenly distributed in the flex container | #main { border: 1px solid #000000; display: flex; flex-wrap: wrap; align-content:space-between; } |
| space-around | Lines are evenly distributed in the flex container, with half-size spaces on either end | #main { border: 1px solid #000000; display: flex; flex-wrap: wrap; align-content:space-around; } |
| initial | Sets this property to its default value. | #main { border: 1px solid #000000; display: flex; flex-wrap: wrap; align-content:initial; } |
| inherit | Inherits this property from its parent element. Read about inherit | #main { border: 1px solid #000000; display: flex; flex-wrap: wrap; align-content:inherit; } |