What is align-content

According to the documentation

The CSS align-content property defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container.

So, in short, this property governs the available space around the items of a flex container in the cross-axis. That means if your flex-flow is row, then the direction of the distribution is vertical. Otherwise, the direction of the distribution is horizontal.

Available values for align-content

You can find all the possible values in the documentation. However, these are the most important ones (I think):

1. start
2. end
3. center
4. space-between
5. space-around
6. space-evenly

What are the space-

Let’s look at the alignment of the items in each case. In our examples, we have a list of boxes. Each box has 5px border(green color) and 10px margin (orange color)

space-between

This is the case where the available space is distributed between the items only. There is no space between the container’s border and the first row of the items. The same effect is applied to the last line.

space-around

The difference between space-between and space-around is there are space between the container’s border and the first and last lines of items. As you can see in the image below, the height of the space marked number 1 and 4 is a half of 2 and 3.

space-evenly

Similar to space-around, space-evenly assign space between the first and last lines of the items and the container’s border. However, the difference is the spaces marked 1 and 4 are equal 2 and 3.

So, those are the space- values of align-content. I think this property is very useful when align items in a flex container. One last caution is that if the items are arranged in just one line, then you will see no effects applied. The items must be on more than one line.