The CSS align-content property modifies the behaviour of the flex-wrap property.
Demo:
The CSS align-content property is similar to the align-items property, but instead of aligning flex items, it aligns flex lines.
Syntax:
align-content: stretch|center|flex-start|flex-end|space-between|space-around;stretch (default) – lines stretch to take up the remaining space.
center – lines are packed toward the center of the flex container.
flex-start – lines are packed toward the start of the flex container.
flex-end – lines are packed toward the end of the flex container.
space-between – lines are evenly distributed in the flex container.
space-around – lines are evenly distributed in the flex container, with half-size spaces on either end.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 200px;
height: 200px;
border: 3px solid #333;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.one, .two, .three, .four, .five {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="box">
<div class="one" style="background-color:#264653;"></div>
<div class="two" style="background-color:#2a9d8f;"></div>
<div class="three" style="background-color:#e9c46a;"></div>
<div class="four" style="background-color:#f4a261;"></div>
<div class="five" style="background-color:#e76f51;"></div>
</div>
</body>
</html>Output:
Note: Internet Explorer 10 and earlier versions do not support the align-content property!
Enjoy coding!
Read also: