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.