What happens when you switch flex-direction?

When starting off with learning the flexbox model, this part was the most confusing. I bet a lot of newcomers to the flex world find it that way too.

You remember when I talked about the default main and cross axis being in the “left-to-right” and “top-to-bottom” directions?

Well, you can change that too. Which is exactly what happens when you use flex-direction: column as described in an earlier section (remember the default value is flex-direction: row). When you do this, the main and cross axis are changed as seen below:

If you’ve ever written any text in the English language, then you already know the language is written from left-to-right and top-to-bottom. That’s equally the direction taken for the default main and cross axis of the flexbox too.

However, on switching the flex direction to column, it no longer follows the “English Language” pattern but Japanese. Oh yes, Japanese!

If you’ve written any text in the Japanese language, then this will be familiar. (for the records, I’ve never written any texts in Japanese). Japanese text is written from top-to-bottom and right-to-left. Think about that for a second. Not so weird, huh?

That explains why this can be a bit confusing for English writers.

Let me walk you through an example. The standard unordered list with 3 list items, except this time I’ll change the flex-direction.