Let’s get flexible!

Of course if you read the spec, you’ll see that auto margins are referenced right in the middle: Spec Reference: 8.1. Aligning with auto margins. If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied. For example, a <div> with the style margin-left: auto would be pushed all the way to the right of the flex container, with the left-side margin taking up any extra space between the left edge of the element and its previous sibling. If you don’t specify a direction, simply applying margin: auto, a flex item would evenly distribute any extra space on either side of the itself equally. This is a way to center one or more items along the main axis. Adding margin: auto to two or more flex items is essentially the same as applying justify-content: space-around to the flex container.

The magic of using auto margins in conjunction with Flexbox comes from allowing you to override the default alignment specified by justify-content on an individual flex item. In the example below, you can see that the price has margin-left: auto applied to it. This allows it to float to the right edge of the container while the rest of the flex items are aligned according to justify-content, which in this case is flex-start. It’s important to note that text alignment properties will have no effect if you are using auto margins because all the extra space along the main axis will be distributed to the margins first leaving no extra space for aligning text.

Margin-left: auto example

Another common use case is to group flex items along the main axis. In this example, margin-left: auto is applied to the li:nth-child(4) in the list of navigation links to separate the account nav items from the main nav list. All links will still be flex items using this technique but you have more control over their position.

FThis is also useful for “grouping” nav items

This same technique can be applied vertically as well along the main axis when using flex-direction: column. In this example, justify-content: space-around is applied to the flex container and margin-top: auto is used on the button to push the call-to-action button and the text to the bottom of the flex container. You can achieve the same effect by wrapping the button and text in a <div>, but then the button and text would no longer be flex items. Note that you need to have a height applied to the flex container in order to see this in action.

Auto margin vertical example

So what’s the bottom line?

Using auto margins with Flexbox is an effective way to get all of the flexibility of css floats, without the nastiness of breaking elements out of the document’s normal flow. It can be applied horizontally or vertically and it gives you more control of flex items along the main axis.

It was Flexbox’s best-kept secret, but now it’s your secret weapon. Enjoy!