The align-content property aligns items in a flex container.
The alignment is along flex lines (horizontal virtual lines).
A flex line works like a magnet, pulling items towards it.
Flex items aligned along a center flex line.
<style>
.align-content-center {
background-color: #776fac;
padding: 5px;
height: 400px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.align-content-center > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="align-content-center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
With align-content, wrapping items stay with flex lines.
This property only has effect with wrapping items.
This means that flex-wrap must be enabled.
align-content: stretch | center | flex-start |
flex-end | space-between |
space-around | initial | inherit;
| Value | Description |
|---|---|
| stretch | Default. Stretches items to take up maximum space |
| center | Groups items along a flex line in the center |
| flex-start | Groups items along a flex line at the top |
| flex-end | Groups items along a flex line at the bottom |
| space-between | Distributes items with maximum space between elements |
| space-around | Distributes items with maximumn space around elements |
| initial | Sets the value to its initial value |
| inherit | Inherits the value from the parent element |
Click the buttons to see the different align-content values.
<style>
.flex-box {
background-color: #776fac;
padding: 5px;
height: 400px;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.flex-box > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
Both properties align items inside a flex container.
align-content aligns items along a flex line.
align-items spaces items evenly in the container.
This image shows the difference with both properties having a value of center.
This table shows when align-content support started for each browser.
 Chrome
|
21.0 | Jul 2012 |
 Firefox
|
28.0 | Mar 2014 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
12.1 | Nov 2012 |
 Safari
|
9.0 | Sep 2015 |
