0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Flexbox uses the concept of the<em>“cross axis”</em>instead of the simple directions “up” and “down”. The “vertical” alignments are made along this axis.</p>
1
<p>Flexbox uses the concept of the<em>“cross axis”</em>instead of the simple directions “up” and “down”. The “vertical” alignments are made along this axis.</p>
2
<p>The cross axis is always perpendicular to the main axis, and when the latter is rotated, the former rotates too to stay perpendicular:</p>
2
<p>The cross axis is always perpendicular to the main axis, and when the latter is rotated, the former rotates too to stay perpendicular:</p>
3
<ul><li>If the main axis flows horizontally, then the cross axis will flow vertically down.</li>
3
<ul><li>If the main axis flows horizontally, then the cross axis will flow vertically down.</li>
4
<li>If the main axis flows vertically, then the cross axis will flow to the right.</li>
4
<li>If the main axis flows vertically, then the cross axis will flow to the right.</li>
5
</ul><p>This behavior is not totally intuitive, but you need to become accustomed to it. It turns out that the cross axis never flows up or to the left. And there is no property that can rotate the transverse axis.</p>
5
</ul><p>This behavior is not totally intuitive, but you need to become accustomed to it. It turns out that the cross axis never flows up or to the left. And there is no property that can rotate the transverse axis.</p>
6
<p>Let’s examine the behavior of the cross axis in practice.</p>
6
<p>Let’s examine the behavior of the cross axis in practice.</p>
7
<p>We added a cross axis indicator to the mini browser. Now you will always know its direction of flow.</p>
7
<p>We added a cross axis indicator to the mini browser. Now you will always know its direction of flow.</p>