Floating Elements with Flexbox

The CSS float property allows you to tell an element where to align itself, in respect to the content around it. Using floats used to be the only way of developing responsive web pages. In fact, floats are still used by most major “grid” systems like Twitter’s hugely popular Bootstrap framework. The problem with floats is that they weren’t designed for overall site layout so it’s not always easy to envision how a layout can be achieved with floats and you’d often need to resort to weird workarounds to get certain things to work (like the infamous clearfix hack).

CSS3 saw the introduction of the flexible box model aka Flexbox. Flexbox makes it much more intuitive to achieve all kinds of complex layouts without any of the hacks that accompany floats. Now that it’s supported by all major browsers there’s no good reason to keep using floats instead of flexbox…

tl;dr

Flexbox > floats

Auto margins are flexbox’s secret weapon and allow you to easily align and “float” individual flex items.

What the flex?!

After months of using flexbox, I was feeling pretty good about my CSS work. I could achieve practically any layout in no time using only flexbox. Until one day, I couldn’t.

I needed to align some of the elements on the horizontal axis to the left of a container and the rest to the right of it.

Using floats this is super easy, by just adding float:left to the left-aligned elements and float:right to the right-aligned elements. Here’s a quick example:

HTML:

<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
</div>

CSS:

.container {
  width: 300px;
  height: 200px;
  background-color: lemonchiffon;
}

.item {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.item1 {
  background-color: lawngreen;
}

.item2 {
  background-color: lightcoral;
}

.item3 {
  background-color: lightblue;
  float: right;
}

But for the life of me I couldn’t figure out how to do it using flex. I could align all the elements left or right using justify-content on the container, but I couldn’t align individual items in a different way to the rest. Of course there is the align-self property, but this only allows you to change the vertical alignment not the horizontal alignment (if using the default flex-direction: row property).

Auto margins to the rescue!

The solution here is to use auto margins. If you apply margin-left:auto to the third element, it will use all the remaining space as the margin for the element and force it to the right of the container!

.container {
  width: 300px;
  height: 200px;
  background-color: lemonchiffon;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.item {
  width: 50px;
  height: 50px;
}

.item1 {
  background-color: lawngreen;
}

.item2 {
  background-color: lightcoral;
}

.item3 {
  margin-left: auto;
  background-color: lightblue;
}

Similarly, if you apply margin-left:auto to the first element (no margins for the second element), the remaining space is split between the margins for the first and third element.

As you can see, the ability to individually align elements using flexbox together with auto margins opens up a whole new level of precision when it comes to fine tuning your layouts. Just another reason to ditch floats and embrace the flex future.

Further reading:

Where I first saw flex and auto margins in action by Sam Provenza
A visual guide to Flexbox by Scotch.io
A collection of flexbox resources by Smashing Magazine
A showcase of problems solved by Flexbox by Philip Walton
An interactive game that teaches layout using Flexbox by Thomas Park