Web development

CSS align-content Property

CSS align-content Property

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


The CSS align-content property is similar to the align-items property, but instead of aligning flex items, it aligns flex lines.


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.


<!DOCTYPE html>
#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;

<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>



Note: Internet Explorer 10 and earlier versions do not support the align-content property!

Enjoy coding!

Read also:

CSS justify-content Property

CSS Flexbox