Using Flexbox Now
Ian Ebden · February 20, 2013
Now we have Flexbox – a genuine layout tool. No more hacks. With Flexbox, you can divide child elements equally as columns, or as a row of boxes with equal height – a row that reflows onto a new line if the viewport shrinks, and so on. Flexbox elements can have pixel widths, percentages, ems, vws, fixed and flexible widths combined… Oh happy day!
So what’s stopping us?
Chris Coyier’s recent article ‘Using Flexbox: Mixing Old and New for the Best Browser Support’ made me want to dive right in and start using Flexbox today. It seems modern browsers are all cool with Flexbox, so long as you serve each their preferred syntax. Oh, and ordering is paramount too. That aside, we’re good to go right?
Wrong. Chris’ write-up (great though it is) doesn’t offer a solution for Internet Explorer 9 and older. No Flexbox support there, and that’s still a big chunk of users in 2013. Maybe we’ll have to pop Flexbox back on the shelf for a little while longer.
Conditional classes to the rescue
We can actually start creating Flexbox layouts today, and serve the old positioning/float layout methods to older IE via conditional classes. Here’s how it works. Let’s take Chris’ markup as a starting point:
The keen eyed amongst you will notice I reordered the elements slightly to put the main content back in the middle. Flexbox allows you to use styles to re-order elements visually, regardless of their source order. But there’s no way of achieving this with CSS for older IE I’m afraid, so we’ll need to respect source order for a little while longer. Anyway, onwards.
Let’s add some conditional comments to the top of our document to establish which version of IE we’re dealing with:
No question conditional comments are a hack, but they’re a necessary evil in this and many other instances. Firstly, we’re adding classes to the
<html> tag so we can target different versions of Internet Explorer. Since IE10 supports Flexbox, the only versions we’re interested in for this example are
.lt-ie10 (less than IE10).
<aside>. Without that script our styles for these elements would just be ignored in <IE10.
Now the CSS.
The top portion of these styles is taken from Chris’ article, I’ve just added some background colours to show up the columns better in the browser. The bottom half is where we use our conditional classes, and do our float fallback.
Firstly (for <IE9) we get the
<nav> displaying as block-level elements, just as they would in modern browsers. Next, since <IE10 will simply ignore all our earlier Flexbox declarations, we can use conditional classes (.lt-ie10) to target those browsers and use the old float method for layout. Job done.
A quick cross-browser test in BrowserStack came up trumps (apart from a width issue in Firefox which I’m looking into). So if you’re okay about mixing old and new Flexbox syntaxes in your styles (and why wouldn’t you be?), then now might be the time to start using Flexbox on live projects.