0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Do you remember how a document normally flows? Blocks and text are arranged from left to right and from top to bottom.</p>
1
<p>Do you remember how a document normally flows? Blocks and text are arranged from left to right and from top to bottom.</p>
2
<p>Under the traditional block model, the directions “left”, “right”, “top”, and “bottom” cannot be changed. But within a flex container you can modify these concepts, since you can change the typical direction of the flow.</p>
2
<p>Under the traditional block model, the directions “left”, “right”, “top”, and “bottom” cannot be changed. But within a flex container you can modify these concepts, since you can change the typical direction of the flow.</p>
3
<p>The flexbox uses the concept of the<em>“main axis”</em>instead of the simple directions “left” and “right”. The flex items flow along the main axis from the start to the end of it.</p>
3
<p>The flexbox uses the concept of the<em>“main axis”</em>instead of the simple directions “left” and “right”. The flex items flow along the main axis from the start to the end of it.</p>
4
<p>By default, the main axis flows from left to right, but it can be rotated in all directions using the flex-direction property, which is assigned for the flex container. The property values are:</p>
4
<p>By default, the main axis flows from left to right, but it can be rotated in all directions using the flex-direction property, which is assigned for the flex container. The property values are:</p>
5
<ul><li><p>row - The default value, whereby the main axis flows from left to right.</p>
5
<ul><li><p>row - The default value, whereby the main axis flows from left to right.</p>
6
</li>
6
</li>
7
<li><p>column - The main axis flows from top to bottom.</p>
7
<li><p>column - The main axis flows from top to bottom.</p>
8
</li>
8
</li>
9
<li><p>row-reverse - The main axis flows from right to left.</p>
9
<li><p>row-reverse - The main axis flows from right to left.</p>
10
</li>
10
</li>
11
<li><p>column-reverse - The main axis flows from bottom to top.</p>
11
<li><p>column-reverse - The main axis flows from bottom to top.</p>
12
</li>
12
</li>
13
</ul><p>Flex items are always arranged along the main axis, regardless of the direction of flow.</p>
13
</ul><p>Flex items are always arranged along the main axis, regardless of the direction of flow.</p>
14
<p>We added a main axis indicator to the mini browser. Now you will always know its direction of flow.</p>
14
<p>We added a main axis indicator to the mini browser. Now you will always know its direction of flow.</p>