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:

<ul>
	<li>Branding</li>
	<li>Home</li>
	<li>Services</li>
	<li>About</li>
	<li>Contact</li>
</ul>

ul {
	display: flex;
}
li {
	flex: 0 0 auto;
}

ul {
			display: flex;
			border: 1px solid red;
			padding: 0;
			list-style: none;
			background-color: #e8e8e9;
		}

li {
			flex: 0 0 auto;
		  	background-color: #8cacea;
		 	margin: 8px;
		 	color: #fff;
		 	padding: 4px;
		}

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox DB</title>
</head>
<body>
<ul>
	<li>Branding</li>
	<li>Home</li>
	<li>Services</li>
	<li>About</li>
	<li>Contact</li>
</ul>
</body>
</html>

$(document).ready(function () {
$('#content').html('Hello World!');
});

codemirror

There are a couple of things to note here. So listen up!

1. The ```flex-grow``` value is set to zero. This explains why the list items don't grow

2. The flex-items are aligned to the start of the main-axis (the default behavior)

3. Owing to the items being aligned to the start of the main-axis, some extra space is left on the right. You see that?

<center><img src="/udata/4PZ1gygmkjb/WrqMnjo.jpg"></center>

 
 

Now use `margin: auto` on the first list item (branding) and see what happens.

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.

Auto-margin Alignment

Beware of margin: auto alignment on flex items.

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