Flexbox alternative for IE9

Use modernizr to detect whether flex capabilities are present, and provide fallback styles where necessary. Modernizr will add classes like flexbox, no-flexbox, and flexbox-legacy to the html element, so in your styles you can use:

    .container {
        display: flex;
    .no-flexbox .container {
        display: table-cell;

I highly recommend reading through Zoe Gillenwater’s (@zomigi) presentations on the subject, particularly Leveling Up With Flexbox (Smart Web Conference – September 2014)

  • slide 21: horizontal navigation spacing > display: inline-block;
  • slide 62: pinning elements without flexbox > display: table-cell;
  • slide 70,71: aligning forms fallbacks
  • slide 88,91: example with and without flex order

Also, in her presentation CSS3 Layout, there are a few good sideby side previews of layouts with and without flexbox:

  • slide 73: Using inline-block with flexbox: horizontal form
  • slide 79: Using inline-block with flexbox: horizontal navigation

Some of takeaways for me:

  • browser support ie10+ is pretty good caniuse
  • use auto-prefixr to handle browser prefixes
  • use modernizr to provide fallbacks
  • “flexbox is not all or nothing” @zomigi

Leave a Comment