What is align-content
According to the documentation
The CSS
align-contentproperty 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):
- start
- end
- center
- space-between
- space-around
- 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.