Search⌘ K
Home
Courses
Understanding Flexbox: Everything you need to know

Auto-margin Alignment

We'll cover the following...

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:

HTML
<ul>
	<li>Branding</li>
	<li>Home</li>
	<li>Services</li>
	<li>About</li>
	<li>Contact</li>
</ul>
NAME_
CSS
ul {
	display: flex;
}
li {
	flex: 0 0 auto;
}

Here’s what we’ve got:



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

...