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 are no margins at the edges.

• space-around evenly distributes the rows along the cross axis. The distances between adjacent rows are the same, but the margins at the edges are equal to half of the distance 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 fact that the property performs a function closer to “distribution” can be seen in particular in its lack of a baseline value. Still, the property works with rows and not with individual items.

This property borrowed the default value stretch from the “alignment” properties, align-items and align-self, as well as the ability to “stretch” the rows in height.