Flexbox: Axes

Photo by Jason Abdilla on Unsplash

One thing that is useful to have in mind when using Flexbox is what axis are you working on. Depending on the direction you are flexing can change the axis will make a difference to the axes.

The reason to know about axes is that some of the flex container properties effect flex items on different axes. This will help you achieve the end result better as you have a better understanding on how it works.

Main Axis

The main axis is decided by which flex-direction you have chosen. You have the options of the following;

• row
• row-reverse
• column
• column-reverse

Row is the default option when you just apply display:flex to a container. This would make the main axis go from left to right.

Row reverse would do the opposite, the main axis would go from right to left.

As you may have guessed it, column makes the main axis go from top to bottom and column-reverse goes from bottom to top.

Cross Axis

You should think of the cross axis as the opposite of the main axis. Where the flex direction is set to row the main axis is left to right so the cross axis is top to bottom.

Where the flex direction is set to column, the main axis is top to bottom where the cross axis is left to right.

Start and End Lines

It is also useful to know where the start and end lines are on the axes as when you start align and justifying content this will help you position your flex items easier.

The start and end lines change in relation to which flex-direction has been set.

Picture a container box, with two flex items inside it. Then have a guess at the below question, mentally, or draw it out if it helps you, where the start or end line would be.

Questions

1) Where would the start line on the main axis, if the flex-direction was set to row-reverse?

2) Where would the end line on the cross axis, if the flex-direction was set to column?

Answers

1) The main axis would be going from left to right, and the start line would be on the right hand side.

2) With the flex direction being set to column, the main axis would go from top to bottom, so the cross axis would go from left to right, and the end line would be on the right hand side.

This diagram may help you in understand further what we explained above.

Taken from the official W3 documentation

I have recently released a FREE book on flexbox called Flexbox Answered: answers to the most common flexbox questions which can help answer some more question on flexbox that you might have.

You can download a copy free on my website craigdennis.me