The align-items property aligns items within a single line, but what happens when your flexbox has multiple lines?
The align-content property in CSS is used to align flexible lines along the cross-axis of a flex container. This property defines how each flex line is aligned within a flexbox, managing the space distribution between and around these lines.
Crucial Note: This property is ONLY applicable if
flex-wrap: wrapis applied and there are multiple lines of flexbox items present. If there is only one line of flex items,align-contentwill have absolutely no effect!
Syntax:
.flex-container {
align-content: stretch | center | flex-start | flex-end | space-between | space-around | space-evenly;
}
Here is a list of the most common align-content property values:
| Value | Description |
|---|---|
stretch |
(Default) The lines stretch to take up the remaining space of the flex container. |
center |
Displays the flex lines packed tightly together at the center of the flex container. |
flex-start |
Displays the flex lines packed tightly together at the start of the flex container. |
flex-end |
Displays the flex lines packed tightly together at the end of the flex container. |
space-between |
Displays the flex lines with equal empty space between them. |
space-around |
Distributes space equally around the flex lines. |
space-evenly |
Distributes lines so that the space between any two lines, and the edges, is perfectly equal. |
Let's look at examples of how align-content behaves. To see the effect, our container has a fixed height of 400px, flex-wrap: wrap, and enough items to force multiple rows.
The stretch value is the default. If the flex items do not have a fixed height, the lines will stretch to fill the entire remaining vertical space of the flex container evenly.
<!DOCTYPE html>
<html>
<head>
<style>
.container-stretch {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: stretch;
background-color: #f4f4f9;
border: 2px solid navy;
}
.container-stretch div {
background-color: lightblue;
color: navy;
width: 100px;
margin: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: bold; border: 2px solid navy;
}
</style>
</head>
<body>
<h3 style="color: navy; text-align: center;">align-content: stretch;</h3>
<div class="container-stretch">
<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>
</body>
</html>
The center value packs all the flex lines tightly together and places them directly in the middle of the flex container, leaving equal empty space at the top and bottom.
<!DOCTYPE html>
<html>
<head>
<style>
.container-center {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
background-color: #f4f4f9;
border: 2px solid navy;
}
.container-center div {
background-color: lightblue; color: navy;
width: 100px; height: 80px; margin: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: bold; border: 2px solid navy;
}
</style>
</head>
<body>
<h3 style="color: navy; text-align: center;">align-content: center;</h3>
<div class="container-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>
</body>
</html>
The flex-start value packs the flex lines tightly together at the very top (the start) of the flex container.
<!DOCTYPE html>
<html>
<head>
<style>
.container-start {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-start;
background-color: #f4f4f9;
border: 2px solid navy;
}
.container-start div {
background-color: lightblue; color: navy;
width: 100px; height: 80px; margin: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: bold; border: 2px solid navy;
}
</style>
</head>
<body>
<h3 style="color: navy; text-align: center;">align-content: flex-start;</h3>
<div class="container-start">
<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>
</body>
</html>
The flex-end value packs the flex lines tightly together at the very bottom (the end) of the flex container.
<!DOCTYPE html>
<html>
<head>
<style>
.container-end {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-end;
background-color: #f4f4f9;
border: 2px solid navy;
}
.container-end div {
background-color: lightblue; color: navy;
width: 100px; height: 80px; margin: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: bold; border: 2px solid navy;
}
</style>
</head>
<body>
<h3 style="color: navy; text-align: center;">align-content: flex-end;</h3>
<div class="container-end">
<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>
</body>
</html>
The space-between value pushes the first line to the top, the last line to the bottom, and distributes the remaining lines evenly in between.
<!DOCTYPE html>
<html>
<head>
<style>
.container-between {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: #f4f4f9;
border: 2px solid navy;
}
.container-between div {
background-color: lightblue; color: navy;
width: 100px; height: 80px; margin: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: bold; border: 2px solid navy;
}
</style>
</head>
<body>
<h3 style="color: navy; text-align: center;">align-content: space-between;</h3>
<div class="container-between">
<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>
</body>
</html>
The space-around value distributes lines evenly, putting an equal amount of empty space around each line. This results in the space between two lines being twice as large as the space between a line and the container edge.
<!DOCTYPE html>
<html>
<head>
<style>
.container-around {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-around;
background-color: #f4f4f9;
border: 2px solid navy;
}
.container-around div {
background-color: lightblue; color: navy;
width: 100px; height: 80px; margin: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: bold; border: 2px solid navy;
}
</style>
</head>
<body>
<h3 style="color: navy; text-align: center;">align-content: space-around;</h3>
<div class="container-around">
<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>
</body>
</html>
The align-content property is fully supported in modern CSS layout environments. The supported browsers include:
For the align-content property to have any effect, which other property MUST be active on the flex container?