0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The remaining four values of the align-content property are similar to the values of the justify-content property, only the axis is different:</p>
1
<p>The remaining four values of the align-content property are similar to the values of the justify-content property, only the axis is different:</p>
2
<ul><li><p>flex-start arranges rows at the start of the cross axis.</p>
2
<ul><li><p>flex-start arranges rows at the start of the cross axis.</p>
3
</li>
3
</li>
4
<li><p>flex-end arranges rows at the end of the cross axis.</p>
4
<li><p>flex-end arranges rows at the end of the cross axis.</p>
5
</li>
5
</li>
6
<li><p>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.</p>
6
<li><p>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.</p>
7
</li>
7
</li>
8
<li><p>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.</p>
8
<li><p>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.</p>
9
</li>
9
</li>
10
</ul><p>Finally, let’s review a short summary.</p>
10
</ul><p>Finally, let’s review a short summary.</p>
11
<p>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.</p>
11
<p>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.</p>
12
<p>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.</p>
12
<p>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.</p>
13
<p>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.</p>
13
<p>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.</p>