0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We didn‘t mention the margin property in the<a>previous assignment</a>, because it comes with a number of surprises:</p>
1
<p>We didn‘t mention the margin property in the<a>previous assignment</a>, because it comes with a number of surprises:</p>
2
<ul><li><p>Margins do not collapse either horizontally or vertically.</p>
2
<ul><li><p>Margins do not collapse either horizontally or vertically.</p>
3
</li>
3
</li>
4
<li><p>Margins do not overflow either the flex container or flex items.</p>
4
<li><p>Margins do not overflow either the flex container or flex items.</p>
5
</li>
5
</li>
6
<li><p>The auto value received the Forbes magazine award in the category “The Most Influential Value for a CSS Property Inside a Flex Container”.</p>
6
<li><p>The auto value received the Forbes magazine award in the category “The Most Influential Value for a CSS Property Inside a Flex Container”.</p>
7
</li>
7
</li>
8
</ul><p>It all has to do with the mechanism that is used to allocate free space. If there is free space inside a flex container, then it is redistributed as follows:</p>
8
</ul><p>It all has to do with the mechanism that is used to allocate free space. If there is free space inside a flex container, then it is redistributed as follows:</p>
9
<ol><li><p>There are items with margins that have been assigned the value auto;</p>
9
<ol><li><p>There are items with margins that have been assigned the value auto;</p>
10
</li>
10
</li>
11
<li><p>All of the free space in the corresponding directions is allocated to these margins (in other words, a certain margin size is set in pixels).</p>
11
<li><p>All of the free space in the corresponding directions is allocated to these margins (in other words, a certain margin size is set in pixels).</p>
12
</li>
12
</li>
13
<li><p>If there are several items with automatic margins set in one direction, then the space between them is redistributed equally.</p>
13
<li><p>If there are several items with automatic margins set in one direction, then the space between them is redistributed equally.</p>
14
</li>
14
</li>
15
<li><p>It is only once these items are spaced properly that the alignment mechanisms are allowed to act on them.</p>
15
<li><p>It is only once these items are spaced properly that the alignment mechanisms are allowed to act on them.</p>
16
</li>
16
</li>
17
</ol><p>Therefore, margin: auto; affects the positioning of flex items on both axes, and is also supersedes<a>alignment mechanisms</a>, because alignment occurs when there is free space. But if all of the free space overflows into the automatic margin, then there is nothing to align.</p>
17
</ol><p>Therefore, margin: auto; affects the positioning of flex items on both axes, and is also supersedes<a>alignment mechanisms</a>, because alignment occurs when there is free space. But if all of the free space overflows into the automatic margin, then there is nothing to align.</p>
18
<p>These features can be used to good effect. For example, you can control the arrangement of the items along the main axis using automatic margins. Let’s experiment.</p>
18
<p>These features can be used to good effect. For example, you can control the arrangement of the items along the main axis using automatic margins. Let’s experiment.</p>