Reducing Layout Hacks With Flexbox

Last week, Code School released our flexbox course, Cracking the Case With Flexbox, which explores the new properties in the spec and how to use them in layouts. Now we’ll talk about why you’d want to use them and how they’ll help you rely less on hacks.

The people who write CSS on a daily basis are truly creative, so as a community we won’t stop finding alternative uses (aka, hacks) for the various properties anytime soon. There are two things, though, that have significantly reduced the need to hack layout CSS: Internet Explorer’s end of support for older versions, and the individual CSS specs being more “intentioned” in their usage. For example, the flexbox spec was a direct reaction to modern layout issues, and in the (semi-distant) future we’ll have another intentional release in grid. Finding and/or using a hack of justify-content is much less likely than some of our favorites, like float and clear.

No More Float Hacking!

Floats have been absolutely necessary for creating great user experiences over the past decade, and they have inspired some of the most creative CSS hacks we’ve seen. With that said, writing CSS without them is wonderful.

In this example, we’re examining a common layout goal: two areas of content should have padding, different background colors, and should (at least appear to) have equal heights. We’ll build up in steps, introducing hacks as we need to, and finish with the flexbox approach.

Floats: Step One

In this step, we target the items in .floats and use float: left to indicate that both items should align to the left, use padding: 20px; so that they have some spacing, and give each item a specific width.

Floats: Hack One

The results are less than desired. Because floats alter their display space, their parent element collapses. There are a multitude of hacks for this (including the infamous clearfix), but we’ll use the most simple one, overflow: hidden, on the container. Now our layout is no longer broken, but the items still aren’t aligned next to each other.

Floats: Hack Two

The intended behavior of elements using the box model is to add padding to their width. This results in something like (25% + 40px) + (75% + 40px), which is larger than 100%, so the two items stack. We can hack the behavior of the items with box-sizing: border-box.

Floats: Hack ???

The items are now aligned next to each other, but the background colors end at different heights. At this point, the real “fun” in hacks would begin. There are a handful of ways to make them equal with CSS or JavaScript, and the approach you choose depends on what is known about the items. If one item is always going to be smaller, applying a background image to the container would work. It’s the easiest (and most fragile) hack.

However, if either one could be taller at any point, you have to get more creative. There are pseudo element approaches with CSS or the sledgehammer approach of using JavaScript to compare the heights and then apply the greatest one to the smallest one. I won’t share examples of all of them because my hope is that you won’t be using them anymore. Instead, let’s look at how this would be handled with flexbox.

Flexbox: Step One

The first step with Flexbox has one key difference from the one in floats: You begin by making the parent element a flex container, with display: flex. This relationship between elements is the biggest mental shift when using flexbox. Aside from the new display type, this step uses the flex-basis property. It is technically optional because width would work the same in this case.

Flexbox: Optional Hack

If you look closely, you’ll see the widths are not equal in both examples. Flexbox was written with an intention of having layouts be ratio-driven. In lieu of specific percentages, it divides the space not used by content (and padding) based on the ratio that you give it. If you want it to be exact, though, you can also use the box-sizing property to control it.

There’s More (of Less)…

This was one example of how flexbox will help you feel more intentional with your layout code. The more time you spend with it, the more you’ll enjoy the freedom of not hacking your layouts, and doing so will prepare you for grid, which will be even more explicit. If you’d like to see some other layout needs that flexbox improves, check out Solved by Flexbox by Phillip Walton or get on the case yourself in Code School’s flexbox course. And don’t forget to let us know what you build in the comments below!