Theory
Theory
Comments

The flexbox cross axis

Flexbox uses the concept of the “cross axis” instead of the simple directions “up” and “down”. The “vertical” alignments are made along this axis.

The cross axis in the flexbox

The cross axis is always perpendicular to the main axis, and when the latter is rotated, the former rotates too to stay perpendicular:

If the main axis flows horizontally, then the cross axis will flow vertically down.
If the main axis flows vertically, then the cross axis will flow to the right.

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.

Let’s examine the behavior of the cross axis in practice.

We added a cross axis indicator to the mini browser. Now you will always know its direction of flow.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cross axis</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug rudolf"></div> <div class="rug muffin"></div> </div> </body> </html>

CSS

.room { display: flex; flex-direction: column-reverse; }

Goalscompleted

Assign another direction to the main axis for the .room block:

from top to bottom,
from right to left,
and then from left to right.

Pay attention to the direction of the cross axis.

The flexbox cross axis

Comments

Log in

Sign up

Restore access