Designing Web Layouts with CSS and Flexbox/

...

/

Align-content

Align-content

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.

We'll cover the following...

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