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

# Oh my gosh, Flexbox solved that?
Some classic problems many designers face with CSS have been trivially solved by Flexbox.

<br>

[Philip Walton](https://philipwalton.com/) in his [solved-by-flexbox project](https://github.com/philipwalton/solved-by-flexbox) lists 6 classic problems (as of this writing)

He extensively discusses the previous limitations with CSS, and the current solution Flexbox provides.

I recommend you take a look after completing this article.

In the practical section coming up, I’ll explain some of the concepts he addresses as I walk you through building a music app layout with Flexbox.

<br>
<br>

# Flexbugs and gotchas for non-compliant browsers
If you’re the not the type of person who writes CSS in their dreams, you may want to watch this [github repository](https://github.com/philipwalton/flexbugs).

Some people who are smarter than I am curate a list of Flexbox bugs and their workarounds there.

It’s the first place I look when something isn’t working as I expect.

I’ll be working you through some prominent bugs in the practical section coming next too.

So you’re covered!

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

Flexbox solved that

Oh my gosh, Flexbox solved that?