0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Do you remember the horizontal alignment mode, where the text is arranged evenly within the block and the edges of the text are fully justified to the edges of the block? Just like in this paragraph.</p>
1
<p>Do you remember the horizontal alignment mode, where the text is arranged evenly within the block and the edges of the text are fully justified to the edges of the block? Just like in this paragraph.</p>
2
<p>Flexbox has similar justify-content values that evenly distribute flex items along the main axis:</p>
2
<p>Flexbox has similar justify-content values that evenly distribute flex items along the main axis:</p>
3
<ul><li><p>space-between - Distances between adjacent items are uniform, and there are no margins between the items and the edges of the flex container.</p>
3
<ul><li><p>space-between - Distances between adjacent items are uniform, and there are no margins between the items and the edges of the flex container.</p>
4
</li>
4
</li>
5
<li><p>space-around - Distances between neighboring items are uniform, and there is a margin between the items and the edges of the flex container that is equal to half of the distance between neighboring items.</p>
5
<li><p>space-around - Distances between neighboring items are uniform, and there is a margin between the items and the edges of the flex container that is equal to half of the distance between neighboring items.</p>
6
</li>
6
</li>
7
</ul><p>Now we will add a third cat and experiment with these values of justify-content.</p>
7
</ul><p>Now we will add a third cat and experiment with these values of justify-content.</p>
8
<p>So far the result is small. The justify-content property controls the arrangement of items along the main axis, and it has five values:</p>
8
<p>So far the result is small. The justify-content property controls the arrangement of items along the main axis, and it has five values:</p>
9
<ul><li><p>The default value flex-start,</p>
9
<ul><li><p>The default value flex-start,</p>
10
</li>
10
</li>
11
<li><p>flex-end,</p>
11
<li><p>flex-end,</p>
12
</li>
12
</li>
13
<li><p>center,</p>
13
<li><p>center,</p>
14
</li>
14
</li>
15
<li><p>space-between,</p>
15
<li><p>space-between,</p>
16
</li>
16
</li>
17
<li><p>and space-around.</p>
17
<li><p>and space-around.</p>
18
</li>
18
</li>
19
</ul>
19
</ul>