Categories
CSS Web development

CSS align-content Property

CSS align-content Property

The CSS align-content property modifies the behaviour of the flex-wrap property.

Demo:

The CSS align-content property is similar to 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!