If you’ve been developing for the web in the past couple of years, you have most likely heard of CSS’s Flexible box layout module (also known as flexbox). Maybe you’ve used it, or maybe you’ve shied away from it in favor of more familiar layout methods. I’ve been using flexbox fairly regularly for the past few months and I have to say, it’s pretty amazing. Here are some practical uses that I have found.
I tend to use flexbox a lot for header layouts. It really lends itself to a lot of the common designs that I see in headers (i.e. a logo on the left, some navigation on the right, maybe a search form, and everything centered vertically). Not only does flexbox allow you to easily lay elements out horizontally, it also makes centering things vertically super easy.
Grid layouts are common in web design, so we already have several methods for laying them out. You can
float, you can use
inline-block, I guess you can use
Let’s say you need to build a photo collage which has two columns and two rows with the second column spanning both rows. Also you’re not allowed to use a table, because it’s not tabular data. What do you do? Write a bunch of weird floats and some JS? Use absolute positioning? Use a ton of divs and style them somehow? Nope. Just use flexbox.
Here’s the part where I tell you that flexbox isn’t fully supported in all browsers (sorry if you’re reading this article in an older browser). The nice thing is, it works pretty well in modern browsers. So far, I haven’t found much need to write fallbacks or workarounds aside from fixing a few small things in IE. Details below.
I’ve found that when specifying a
flex-basis, IE tends to ignore it. You can work around this by also adding a
max-width that matches the
flex-basis. It’s a little annoying, but it has worked fine in my experience.
Another slightly annoying quirk in IE is that it won’t ignore flex children that are hidden with
display: none;. Even though they are visually hidden, they still have an impact on the layout of your flexbox. I’ve only run into this once and I was able to work around the issue by changing the order of my markup and using absolute positioning to move the hidden element out of the box.
In my opinion, flexbox is at the point where it’s supported widely enough to be a good option. I mostly use it for grids and complex layouts that would be difficult or impossible to create with traditional layout methods. The issues that I’ve come across are small enough that they’re easy to work around. If you find yourself needing to support browsers older than IE10, though, you might want to reconsider.
For those of you who are ready to make the move to flexbox, I came across an excellent list of common flexbox bugs along with workarounds called Flexbugs that you can reference if you find yourself running into any trouble. It’s set up as a Git repo and seems to be pretty actively updated.