The align-content property, remaining values

The remaining four values of the align-content property are similar to the values of the justify-content property, only the axis is different:

• flex-start arranges rows at the start of the cross axis.

• flex-end arranges rows at the end of the cross axis.

• space-between evenly distributes the rows along the cross axis. The distances between adjacent rows are the same, but there is no added space at the edges.

• space-around evenly distributes the rows along the cross axis. The distances between adjacent rows are the same, but the added spaces at the edges are equal to half of the added space between neighboring rows.

Finally, let’s review a short summary.

align-content is a hybrid property. Though the name of the property contains “align”, the function that it performs is closer to arranging and distributing, like the justify-content property, from which it has borrowed two values, space-between and space-around.

The distribution of free space is illustrated by the space-between and space-around values covered here. Still, the property works with rows and not with individual items.

This property borrowed the value stretch from the “alignment” properties, align-items and align-self. For align-content, it is the default value and stretches rows along the cross axis—in height in our row layout.