“Old” Flexbox and “New” Flexbox

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Just so everyone is clear on this: “Flexbox” (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented.

How To Tell

If you Google around about Flexbox, you will find lots of outdated information. Here’s how you can quickly tell:

If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox.

If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011.

If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification.

Examples of Outdated Stuff

All this stuff was fantastic at the time it was created, but now is outdated:

Flexie – a JavaScript polyfill for Flexbox, uses old 2009 syntax.

This article by Richard Shepard on Smashing Magazine during the awkward 2011 phase. It passingly mentions the 2011 syntax but focuses more on the 2009 syntax.

Stephen Hay has been writing about Flexbox for a good while. His intro post uses the old 2009 syntax, then he did a follow up to the 2011 syntax unfortunately just one month before the current syntax was released.

I first got pumped about Flexbox from this Paul Irish article, which uses the 2009 syntax. It features a warning at the top, but links to Stephen’s article using the 2011 syntax.

Support

Things get a bit more complicated in terms of browser support.

The old 2009 syntax has surprisingly good browser “support”: Chrome, Firefox 2+, Safari 3.1+… Pretty much everything except IE 9- and Opera anything. I say “support” because the actual implementations were partial and differed a bit (hence the re-write).

Despite more support, it’s not smart to be using the older syntax. The old spec is gone with the wind. Browsers might drop support for the old syntax in the future. At the least, it’s very likely the new syntax is easier to understand and will be implemented more deeply and more consistently. Browsers that don’t yet support Flexbox will implement the new spec, which is in “CR” (Candidate Recommendation) status.

New syntax support is: Chrome 21+, Safari 6.1+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+, and Blackberry 10+.

The yet-to-be-released IE 10 looks like it will be shipping with the awkward tweener Flexbox (display: flexbox;).

Demo

I recently helped someone with an issue of creating a Fluid-Fixed-Fluid column layout. Both syntaxes are capable of this easily (it’s otherwise fairly difficult). They will make good references for testing browser support (and browser deprecation).

Example of OLD syntax

Example of NEW syntax