Contents
The CSS align-content property
In CSS3, the align-content property was introduced. It allowed the developers to modify the way the content of a flex container is displayed vertically (on the cross axis):
Example
div {
width: 80px;
height: 350px;
border: 2px solid #41caf4;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-flex;
display: flex;
-webkit-align-content: left;
align-content: left;
}While it might seem similar to the align-items property, it aligns the flex lines instead of the items:
align-content: CSS syntax
The syntax for the CSS align-content property is simple – all you need to define is the property value:
align-content:value;
You can find all the available values for flex alignment in the table below.
Property values
| Value | Description |
|---|---|
| flex-start | Packs the lines to the start of the flex container |
| center | Packs the lines to the center of the flex container |
| flex-end | Packs the lines to the end of the flex container |
| space‑between | Distributes the lines evenly with the first line at the start and the last one at the end of the flex container |
| space‑around | Distributes the lines evenly with equal spaces in-between |
| stretch | Stretches the lines to occupy all the space. The default value. |
| initial | Returns the default value |
| inherit | Inherits the value from the parent element |
Note: you can't make CSS align content if you only have a single line in the container: there has to be more free space than the content occupies.
Browser support
Chrome
29+
Edge
12+
Firefox
20+
IE
11+
Opera
12.1+
Safari
9+
Mobile browser support
Chrome
29+
Firefox
20+
Opera
12.1+
Safari
9+