Learn about fundamental and advanced CSS Flexbox concepts to design responsive layouts. Gain insights into creating a Responsive Music App seamlessly using the Flexbox model.

This course will cover all the fundamental and advanced concepts you need to get good with the CSS Flexbox model. You will learn to layout a Responsive Music App in the process. It is a detailed course, and I hope you’re ready for it.

Understanding Flexbox: Everything you need to know

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?

<center><img src="/udata/k8k6bQz40Rv/flexbox-engl_zpsgmowsbbi (1).jpg"></center>

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:

<center><img src="/udata/GDJJB6B4keg/01q5kWa.jpg"></center>

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.

Introduction

Flex Container

Flex Items

Absolute and Relative Flex Items

Auto Margin Alignment

Switching Flex Direction

Flexbox Solved That

Building a Music App Layout with Flexbox

Responsive Design with Flexbox

Conclusion

What happens when you switch flex-direction?