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

### Beware of ```margin: auto```  alignment on flex items.
When you use ```margin: auto``` on flex-items, things can look quite weird. You do need to understand what's going on. It may result in unexpected results, but I'm going to explain all that.

When you use ```margin:auto``` on a flex-item, the direction (left, right or both) that has the value 	```auto``` will take up any empty spaces available.

That's a difficult one to catch. Here's what I mean:

Consider the navigation bar marked up and styled below:

# Beware of ```margin: auto```  alignment on flex items.
When you use ```margin: auto``` on flex-items, things can look quite weird. You do need to understand what's going on. It may result in unexpected results, but I'm going to explain all that.

When you use ```margin:auto``` on a flex-item, the direction (left, right or both) that has the value 	```auto``` will take up any empty spaces available.

That's a difficult one to catch. Here's what I mean:

Consider the navigation bar marked up and styled below:

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

Auto-margin Alignment

Beware of `margin: auto` alignment on flex items.