In this lesson, we will learn how to influence where the empty spaces can be aligned in the case of a multi-row Flexbox container. We will also understand the difference between align-items and align-content.

When a flex container has a fixed cross-axis dimension, width, or height, we can decide how we would like to use the available space to display inner content.

The align-content property is used for wrapped Flexbox content. If you are planning to display one single line or column, use align-items to position your content along the cross-axis.

Motivation for align-content

Let’s set up a container of six blog posts:

<div class="container">
  <div class="blogpost">Post 1</div>
  <div class="blogpost">Post 2</div>    
  <div class="blogpost">Post 3</div>
  <div class="blogpost">Post 4</div>
  <div class="blogpost">Post 5</div>    
  <div class="blogpost">Post 6</div>
* {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;

.container {
  display: flex;
  flex-flow: row wrap;
  width: 600px;
  height: 300px;
  background-color: darkred;

.blogpost {
  border: 1px solid black;
  background-color: lightgrey;
  width: 200px;

Get hands-on with 1200+ tech skills courses.