0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>If you simultaneously assign values to align-items and align-content, the align-items property will not be completely deactivated. Rather, it can still affect the display of flex items in rows.</p>
1
<p>If you simultaneously assign values to align-items and align-content, the align-items property will not be completely deactivated. Rather, it can still affect the display of flex items in rows.</p>
2
<p>This can happen when we use the default value of stretch for align-content. It stretches the rows of flex items in such a way that the remaining free space between them is divided equally.</p>
2
<p>This can happen when we use the default value of stretch for align-content. It stretches the rows of flex items in such a way that the remaining free space between them is divided equally.</p>
3
<p>The way that lines are displayed with align-content: stretch depends on the value of align-items:</p>
3
<p>The way that lines are displayed with align-content: stretch depends on the value of align-items:</p>
4
<ul><li>If align-items has been assigned the value stretch, then the items in the lines will be stretched to the entire height of their respective lines.</li>
4
<ul><li>If align-items has been assigned the value stretch, then the items in the lines will be stretched to the entire height of their respective lines.</li>
5
<li>If the value differs from stretch, then the items in the rows are compressed to the size of their own contents and are aligned in the rows depending on the value of align-items.</li>
5
<li>If the value differs from stretch, then the items in the rows are compressed to the size of their own contents and are aligned in the rows depending on the value of align-items.</li>
6
</ul><p>Let’s see how this effect behaves in practice.</p>
6
</ul><p>Let’s see how this effect behaves in practice.</p>