Yesterday in my presentation on CSS3 Layout I talked about the different syntaxes that the Flexible Box Layout module (Flexbox) has gone through on its journey to candidate recommendation. As I said in my talk, IE 10 didn’t have time to update to the new syntax before it came out last fall, so it uses the syntax that first came out in 2011, with the -ms- prefix tacked on.
Fortunately, Flexbox basically works the same way between IE 10 and the current syntax; it just uses some different property and value names. To help you keep track of the differences, I quickly created this table today comparing the current, standard-to-be syntax with the 2011 syntax that IE uses. This is not meant to be some comprehensive, precise reference, just a quick and dirty cheat sheet, but hopefully it will be useful to you (and me) someday.
| Current Syntax | Differences in 2011 Syntax | What It Does |
|---|---|---|
flex and inline-flex values for display property |
flexbox and inline-flexbox values |
creates flex container |
flex-direction property |
none | specifies orientation of flex items’ layout (horizontally or vertically and upwards or downwards) |
flex-wrap property |
none | controls whether flex items can lay out on multiple lines or just one |
flex-flow shorthand property |
none | see flex-direction and flex-wrap properties above |
order property |
flex-order property |
rearranges flex items’ spot in the visual layout order |
flex-grow property |
doesn’t exist as separate property, equivalent to positive flexibility component of flex value |
specifies proportion of extra space to distribute to each flex item’s main dimension |
flex-shrink property |
doesn’t exist as separate property, equivalent to negative flexibility component of flex value |
specifies proportion of overflowing size to subtract from each flex item’s main dimension |
flex-basis property |
doesn’t exist as separate property, equivalent to preferred size component of flex value |
specifies starting size to use before adding or subtracting extra space |
flex shorthand property |
same property name but portions of value are named positive flexibility, negative flexibility, and preferred size | see flex-grow, flex-shrink, and flex-basis properties above |
justify-content property with flex-start, flex-end, center, space-between, and space-around values |
flex-pack property with start, end, center, justify, and distribute values |
aligns flex items along the main axis (set with flex-direction) of the current line |
align-content property with same values as justify-content plus stretch |
flex-line-pack property with same values as flex-pack plus stretch |
aligns lines of flex items (if multi-line) along the cross axis |
align-items property with flex-start, flex-end, center, baseline, and stretch values |
flex-align property with start, end, center, baseline, and stretch values |
aligns flex items along the cross axis of the current line |
align-self property with same values as align-items plus auto |
flex-item-align property with same values as flex-align plus auto |
overrides align-items on individual flex item in the current line |
So does my creation of this table mean I’m recommending you feed IE 10 the 2011 syntax? Ehhhh….I don’t know.
I’m not going to tell you whether or not you should feed IE 10 the 2011 syntax, on that future day when you start using Flexbox on a live site. On the one hand, it sucks to write CSS that will never become a standard. On the other hand, this syntax is isolated to IE 10 and always will be, so it’s safe and stable. (This is assuming that IE 11 will update to the new syntax, which I don’t see why they wouldn’t.) So I’m undecided.
The bottom line is that we don’t have to make this decision right now because we’re not using Flexbox just yet. Let’s wait until Flexbox becomes production-ready before we decide which browsers to support and at what level.
Until then, play around with Flexbox, and remember that if you want to test out your experiments in IE 10, you’ll need to use the 2011 syntax prefixed with -ms-, and that’s what this is here for.
Why do you label the draft IE10 is following “2011”? The document you link to is clearly labeled “March 2012”.
Because from 2009 to 2011 the spec didn’t change at all. In 2011 is when the new syntax came out, the syntax IE 10 follows. It was slightly updated a couple times after that, but nothing major. So I linked to the most recent version of the 2011 spec. In fall 2012 is when the syntax was changed again.
As far as I know, every major browser supports `flexbox`
and all modern mobile phones do as well, so why wait?
Only Chrome and Opera support the current spec.
Firefox 20 supports it, too. It will be out on April 1st so very soon! And with Firefox rapid release schedule we can forget about Fx 19 in just a few weeks.
So the only problem remains IE10.
And IE 9, and IE 8, and Android 2.3, and a whole lotta other browsers that lots and lots of people use everyday. I wish Flexbox was ready for primetime, but I think right now it should only be used in limited ways as progressive enhancement, not to control an entire layout.
March 2014 – Firefox 27 lack of flex-wrap (flex-flow).
Also, http://caniuse.com/flexbox: “For Firefox 28- it refers to lack of flex-wrap & flex-flow support.” !!!
Thanks for this article, it helped me a lot to enable my flexbox based layout for IE10. But there is a little error: You say, that flex-shrink, flex-grow and flex-basis doesn’t exist as a separate property. Indeed, they do: -ms-flex-positive, -ms-flex-negative and -ms-flex-preferred-size.
Regards, Urs