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 ???
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!