0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Remember the justify-content property, which controls the distribution of flex items along the main axis?</p>
1
<p>Remember the justify-content property, which controls the distribution of flex items along the main axis?</p>
2
<p>There is a very similar property align-content, which controls the alignment of <em>rows</em>of flex items along the<em>cross</em>axis. These properties have practically identical values:</p>
2
<p>There is a very similar property align-content, which controls the alignment of <em>rows</em>of flex items along the<em>cross</em>axis. These properties have practically identical values:</p>
3
<ul><li><p>flex-start,</p>
3
<ul><li><p>flex-start,</p>
4
</li>
4
</li>
5
<li><p>flex-end,</p>
5
<li><p>flex-end,</p>
6
</li>
6
</li>
7
<li><p>center,</p>
7
<li><p>center,</p>
8
</li>
8
</li>
9
<li><p>space-between,</p>
9
<li><p>space-between,</p>
10
</li>
10
</li>
11
<li><p>space-around,</p>
11
<li><p>space-around,</p>
12
</li>
12
</li>
13
<li><p>and stretch, which is also a value of align-content, but which is absent from justify-content and is the default value.</p>
13
<li><p>and stretch, which is also a value of align-content, but which is absent from justify-content and is the default value.</p>
14
</li>
14
</li>
15
</ul><p>The align-content property overrides any other assigned value of align-items, which controls the alignment of the flex items along the cross axis. This happens when there is only one row of flex items and when there are several such rows.</p>
15
</ul><p>The align-content property overrides any other assigned value of align-items, which controls the alignment of the flex items along the cross axis. This happens when there is only one row of flex items and when there are several such rows.</p>
16
<p>Previously the specification prescribed a different behavior:</p>
16
<p>Previously the specification prescribed a different behavior:</p>
17
<ul><li>if there is only one row of flex items, then align-items takes precedence;</li>
17
<ul><li>if there is only one row of flex items, then align-items takes precedence;</li>
18
<li>if there are several rows, then align-content takes precedence.</li>
18
<li>if there are several rows, then align-content takes precedence.</li>
19
</ul><p>For a fairly long time this was the chosen behavior in all browsers. But in early 2019, the behavior was updated in all modern browsers according to the specification.</p>
19
</ul><p>For a fairly long time this was the chosen behavior in all browsers. But in early 2019, the behavior was updated in all modern browsers according to the specification.</p>
20
<p>You may encounter the old behavior in this assignment if you are completing this chapter in an old browser version.</p>
20
<p>You may encounter the old behavior in this assignment if you are completing this chapter in an old browser version.</p>