Flexbox syntax for IE 10

It’s tough to keep track of which version of the Flexbox spec uses which property and value names, so here’s a comparison of the current syntax with the 2011 syntax that IE 10 supports, as well as a basic definition of what each Flexbox property does.

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 vs 2011 Flexbox Syntax
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.

Related Posts:

Did you like this?

13 Responses to “Flexbox syntax for IE 10”

  1. c.

    Why do you label the draft IE10 is following “2011″? The document you link to is clearly labeled “March 2012″.

    Reply
    • Zoe Gillenwater

      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.

      Reply
  2. hkjels

    As far as I know, every major browser supports `flexbox`
    and all modern mobile phones do as well, so why wait?

    Reply
      • m_gol

        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.

        Reply
        • Zoe Gillenwater

          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.

          Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>