Why does header > div:nth-child(3) {
margin-left: auto
}

cause the right most item in a 3 item flexbox, to be shove right?

What does margin-left: auto do in this context?

Margin: auto; basically means "add as much margin as you have room for". So if parent is larger than the child and you add as much margin as you can to the left side of a child, it ends up being pushed to the right.

@hitko what he said.

That’s the beauty of flex boxes, and if you didn’t notice, it also pushes anything on the right side (Elements after the 3rd) along with it.

The day I discovered flex boxes (many many years ago), I fell in love.

Thank you to both of you. I was under the misunderstand impression that auto tried to *minimize* area usage, instead of *maximize*, derp.

So its a very flexible layout choice.

Leads to a second question - I heard it said by others that flexbox is winning out over css grid as the preferred method of layout. Why?

@Wisecrack Because there's really limited use for CSS grid. In fact, the only common use for grid is when you want to precisely align cells across multiple rows and columns in a responsive way, or when you need to make a table, but you want to pretend you're doing something modern.

It's way more common to have a bunch of items where all you really care is that they fill the whole width, have uniform width, and wrap as needed.

Flexbox:

display: flex;
flex-wrap: wrap;
flex-basis: 200px;

Grid:

display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Now tell me, which one is easier to understand an remember?

I FEEL that you need flex-grow: 2