Using Flexbox: Mixing Old and New for the Best Browser Support

Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids

The HTML

A semantically meaningless wrapper goes around the three main areas and will set the flexbox context. Each of the areas is semantically marked up and will be turned into columns.

Flexbox Context

We need to make the container for our columns a flexbox display context. Just by doing this, all direct children of this element become flex items. Doesn't matter what they were before, they are flex items now.

Right away we need to weave the old, new, and tweener syntaxes together. Order is important here. Since the display property itself isn't prefixed, we need to make sure we don't override newer syntaxes with older syntaxes for browsers that still (and probably always will) support both.

In the new syntax, setting the width for the sidebars isn't necessary as it will fill the remaining 40% equally making them both 20%. But I found not setting it cause some width collapsing with the old syntaxes.

Column Re-Ordering

We want the main content to visually appear in the middle, but be first in the source order. Easy cheesy in flexbox, but of course we need to weave together the new, old, and tweener syntaxes.

Browser Support

If you do all this weaving, you can get:

Chrome any

Firefox any

Safari any

Opera 12.1+

IE 10+

iOS any

Android any

The biggest limiting factor of course being IE, but otherwise it's pretty good. If you're doing a mobile-specific version of a site, you're in even better shape. If someone can test it on Windows Phone, lemme know.

Firefox 19- is a bit buggy and you'll need to watch it. For instance, in this demo I wasn't able to figure a way to force the sidebars to actually be 20%. The just collapse to the width of the content inside, which is a bit arbitrary as it's text. I also needed -moz-box-flex: 1; on the main content (60%) otherwise it would stretch to be as wide as the widest paragraph as if it had white-space: nowrap, which is just inexplicable to me.

Thanks to the author, Chris Coyier. Using flexbox makes sence, especially when we work with modern browsers (some time in a close future, I hope).
Pete B: You added the link to Flexy Boxes which makes great sence: a Webapp to help us getting started using flexbox – thanks.

if you’re considering using a polyfill, you might as well just target .flexbox and .flexboxlegacy in your CSS with Modernizr. i mean unless your heart is completely set on having your flex boxed layout show in IE9. i tend to leave older browsers behind when it comes to stuff like this. if they don’t have flex box, then they just get the non flex boxed layout. then again, i’m only using flex box for larger screens targeted with media queries, so yeah I wouldn’t recommend flex box for a default layout.

Unfortunately it only supports the old model, but it seems to do so quite well. If nothing else, the awesome playground i linked to gives you a great understanding of the capabilities of flexbox. I really had no idea!

Pretty neat stuff Chris. Was wondering if anyone had an idea of support on BlackBerrys. Over 70% of the mobile traffic we get from the company I’m with comes from BlackBerry devices and can be really frustrating. Unfortunately, BrowserStack doesn’t support BlackBerry devices at the moment (._. )

Never know about Flexbox before. Thank you for writing detailed article on using Flexbox. I like ordering of elements based on priority, pretty cool. I think there is a lot of room to improve your code, still very useful. I tested it on IE10 and its working fine.

There’s actually a few things that can’t be directly translated between the specifications, so you can’t just drop your values into the prefixed properties like that. There’s subtle differences between the specs like “flex-start” vs “start” or “space-between” vs “justify”. The “order” property indexs at 0, while “box-ordinal-group” indexes at 1.

It appears that Dominic is correct. Changing the layout.css.flexbox.enabled to true appears to fix the issues you were experiencing in Firefox. Great article nonetheless and thanks again, Chris. I look forward to being able to use Flexbox reliably across browsers in the very near future.

One major limitation I’ve found with flexbox is that it only works on direct children. This is a major issue when your content elements are part of a column placeholder, rather than a single main parent as this article shows. A full explanation of this issue:

Great to have such a decent support for Flexbox, but what’s it worth if you have to come up with an alternative solution for almost every IE?

I’m a big advocator for graceful degradation and usually don’t care much about oldIE, but in the case of Flexbox it’s not ready for production work until oldIE dies out (which won’t happen) or there is a polyfill. If you just have to care about Webkit, i.e. Apps, Flexbox is definitely the way to go, but for a normal website it’s by far too much effort in my eyes.

@Peter, Not sure if I misunderstood your comment, but instead of using the ‘skip to nav’ links (which I think it would be ‘skip to main content‘ or ‘skip navigation‘ instead), you could use WAI-ARIA Landmark Roles.

Usually Mobile IEs have the same features as their desktop counterparts. So Windows Phone 7 with IE9 wouldn’t support Flexbox, but on Windows Phone 8 with IE10 it should work with your “tweener” solution.

It’s a bit of a hack, but to work around the FF percentage bug, you can use -moz-calc and the vw unit. Subtract the body margin (8px twice) and padding (2em twice) from the full viewport width, then multiply by a decimal instead of a percentage (.2): -moz-calc((100vw - 4em - 16px) * 0.2). Obviously not a good solution for more than the most basic formulas.

That’s really awesome! Finally CSS has something that allows us to have fixed-width sidebars with flexible-width content column! Up till now, only damn old table was able to accomplish it!

I made a little test, setting min-width and max-width together with %-based width to sidebars and leaving content with no width set. It worked great. If I lower browser width, content gets very narrow and sidebars remain with min-width. And if I get browser in my 3 monitors, content gets very large while sidebars stay on their max-width! If I use column css attributes in content, I’m able to get a really nicely readable website optimized for large monitors!

Now I must find a way to hide/move to bottom both sidebars when in wacky-ugly-devil-born phones :p