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).
The example of the “NEW Syntax” isn’t in columns, it’s stacked. Is that supposed to happen?
You’re probably viewing it in an unsupported browser.
ummmm…. that’s the same thing happening to me although I’m using firefox latest version 14.0.1
Any idea? Could this happen due to the screen resolution? Mine is 1366×768 right now.
Anyways nice article. Didn’t know about it before.
Firefox doesn’t support it
@Anders Grimsrud: WAAAAAAAAAAARGGGGGGGGGHHHHH!!!!
Viewed the NEW syntax in Safari 6.0 (8536.25): boxes are stacked on top of each other?
Safari 6 doesn’t support it.
That´s almost good. someone might be done a pollyfill already. lol.
A little css implamentation and we got a good responsive example
Some of that code seems kinda redundant, Rudy. In theory, could you get rid of the min-width from .col and .fluid and just set the media query to use max-width of 600px (to account for the minimum 100px on left and right + 400px in the middle) and call it a day?
Also, don’t forget that its bets to build things mobile-first, so instead of using @media with (max-width: … ;) you’d want to build smallest first +
@media screen and (min-width: ... ;)Looks like the web’s just moving too fast. You said Chrome 21 was in Beta, but even though this article was posted today, it looks like Chrome 21 is now the stable. So from the time you wrote this article to the time you posted it, Chrome was updated. I’m on the stable channel and the “new demo” worked for me.
Thats better, David!
Sry, i dont know how to reply here? little help?
So is the only supported browser for the NEW version Chrome 21?
Safari 6: no support
Chrome 20: no support
Firefox 14: no support
Opera 11: no support
Yes, Chrome21+
As it says in the support chart, browsers marked with “partial support” either support the old spec or the old syntax.
It’s supported in IE10 too: http://msdn.microsoft.com/en-us/library/ie/hh673531%28v=vs.85%29.aspx
Kinnnnnda. It supports the weird 2011 syntax, while prefixed. I hope the update it before release. WHICH WHEN IS THAT COMING DANG NABBIT IT’S BEEN LIKE 18 MONTHS.
Doh, yeah, should’ve checked before I posted. No idea if IE10 got a final update before going to release; documentation hasn’t been updated. Release is in October, I think.
iOS 5 also doesn’t support the new flexbox, but it does support the old syntax.
After playing around with both syntaxes for some time, I have to say I think the new syntax is far superior in the sense that it was easier to understand conceptually.
I really hope that the A-grade browsers implement the new syntax soon.
Note that Modernizr tests for flex-wrap support, which obviously return support for the new flexbox spec. (Even though the Docs refer to an old article over at HTML5 Rocks covering the box-* values)
Thus we can employ the new flexbox by default (push the standards!) and fall back to the old flexbox when not supported:
(I stripped the vendor prefixes!)
selector { display: flex } .no-flexbox selector { display: box }Browsers might drop support for the old syntax in the future. But for now and a lot of people use the old browser, this is the problem of have to consider.
finally Flexbox is looking useful. The old version had too many shortcomings. #happy
You could use display “box” for the same effect with chrome and firefox. See below for a 2 column layout of fixed fluid
Uhmmmmm.
So this whole article is about identifying code like the above as being of the “old” syntax. I do not recommend using this (despite the fact that it works at the moment).
This is the only code that works for me. I’ve been trying to implement the flex box based on the code you put in codepen and none of it works. I even went as far as to strip it all down to just the code with an index file and a css file and nothing else.
For some reason the code you wrote in codepen doesn’t work in the real world. It works in codepen but when I copy paste it into an actual html file the boxes just stack for all browsers using both the old and new method.
The code above seems to work though.
Thanks for the article. I have never actually used flexbox and likely wont until we get some decent support cross browser. Hopefully next year you aren’t having to write yet another blog like this with new syntax.
Thanks Chris
Chrome 21 obviously isn’t beta since my current version is already an updated version of 21. Demo seems to work fine. Flexbox is really just a tease though. Once again developers are given awesome tools to make their lives easier only to have them taken away by inconsistant and unsupported browsers. It’s going to be a long time before this can ever be safely implemented. So sad.
http://cl.ly/IcLY
I think both stable and beta are 21 at this second. I think they pushed 21 stable sooner than later to support Retina stuff.
Android still has not updated the latest Flexbox syntax http://dev.w3.org/csswg/css3-flexbox/, so thous who wants mobile device support too – use old and new syntax to support on all devices.
Does anyone know how long we can expect to wait for roll out of support for this.
I mean, obviously, I’m not too hopeful yet, but it’d be nice to know if Moz and IE etc had a view on it!
Now we just need to find polyfill that will convert old syntax to new.
Having used the flexible box model progressively on a number of recent projects via the Compass “display-box” mixin, my hope is that once this new method is more widely supported Compass will update and replace my legacy code with the appropriate changes.
(fingers crossed)
CORE-27374 is the little name of the main bug in Opera land for the support of Flexbox. So Opera is working on it. The issue being as you mentioned it, the multiple versions of the specification. I expect compatibility headaches for both browser implementers and Web developers with all the legacy code out there.
i think firefox is very useful for css online editing.
I also made an extensive demo of the new syntax:
Thanks for the post Chris. This helped me a lot to not learn old stuff ;)
Thanks so much for this. I hadn’t even heard there was a new “version” of flexible box yet.
This whole Flexible Box Layout Module has been the most frustrating thing in my career to date. I remember reading about it in gosh darn 2009, two jobs ago, thinking “this is going to make my visual/layout development so much easier, I can’t wait until browsers implement this”.
3 years later, 3 ungodly years later, I am still at the exact same state: “this is going to make my visual/layout development so much easier, I can’t wait until browsers implement this”
This is soooo sad. I really hope IE10 implements the current spec but I am not holding my breath. So I will probably have to wait until IE11 before flex becomes reliably usable, and I am sure it’ll take forever for it to be on mobile devices (which would benefit the most from it) and 3 years from now I’ll still be thinking, “this is going to make my visual/layout development so much easier, I can’t wait until browsers implement this”.
It really is more frustrating to be so close for so long than it would have been to never have known about box/flexbox/flex at all.
FWIW, recent WebKit nightlies support the new syntax.
What I find most frustrating is not being able to get any indication from Mozilla as to when FireFox might implement the revised syntax. FireFox currently has the oldest most broken implementation of any browser.
display:flex
this is not supported for IE 8 and IE 9..Please give any solution.
Along with Rudy and David’s input above you both saved us a lot of time! Glad i read through them all though first lol!