How Auto Margins Work in Flexbox

January 6th, 2020

Robin has covered this before, but I’ve heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted to join the party.

Say you have a flex container with some flex items inside that don’t fill the whole area.

See the Pen ZEYLVEX by Chris Coyier (@chriscoyier) on CodePen.

Now I want to push that “Menu” item to the far right. That’s where auto margins come in. If I put a margin-left: auto; on it, it’ll push as far away as it possibly can on that row.

See the Pen WNbRLbG by Chris Coyier (@chriscoyier) on CodePen.

Actually, you might consider margin-inline-start: auto; instead and start using logical properties everywhere so that you’re all set should you need to change direction.

See the Pen gObgZpb by Chris Coyier (@chriscoyier) on CodePen.

Also, note that auto margins work in both directions as long as there is room to push. In this example, it’s not alignment that is moving the menu down, it’s an auto margin.

See the Pen XWJpobE by Chris Coyier (@chriscoyier) on CodePen.