Are We Ready to Use Flexbox?

flexible adjective
1. capable of bending or being bent, able to be easily modified to respond to altered circumstances or conditions.

box noun
1. a rigid typically rectangular container.

The Flexible Box Module, a.k.a. flexbox, is all the latest and greatest at the moment. It digs into the fundamentals of the CSS box-model, providing us with a powerful and highly useful module for layout configurations. It is easily defined in our CSS and markup, and responsive adaptations are just a media query away. Think about a world where we don’t have to clear floats or utilise frameworks or masses of code to create responsive grids. Flexbox does all the dirty work. For us, it’s just a simple implementation. We define a flex container, and in it we have flex items.

flexbox example

Exactly What is Flexbox?

Here’s a definition of flexbox, according to MDN:

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

In simple words, we can mark up a few flex items inside a flex container, and define the layout arrangement with our CSS. We have numerous options when defining our layout arrangement that make possibilities endless. Here are a few:

  1. flex-direction – With this property we can specify if we want the items to be in a row or column, and also if we want the items to be in order of markup appearance or reversed.
  2. justify-content – Let’s us declare how the browser should distribute the available space between elements. In other words, if we have 3 elements at a combined total width of 50% of their container, we can specify whether to pack the elements to the left, right, center, distribute from left to right with an even amount of spacing in between them, along with some other options.
  3. flex-wrap – With this property, we can specify whether we want our flex items to jump to a new line if the flex container runs out of space.

The points above are just a small sampling of the capabilities of flexbox, and you can get much further insight and documentation by visiting the flexbox guide on MDN. I encourage you to go experiment and get familiar, but I won’t bombard you with any more theory. Let’s look at how flexbox has evolved over the years.

A History of Flexbox

Flexbox is now becoming more widely used due to its increasing support as the days roll by, but it has actually been around since 2009. With that in mind, there’s a lot of documentation and examples around the web these days that utilise old versions (although this is starting to fade out).

In a nutshell:

  • The 2009 spec was released, and with it came all the box- type declarations. If you see any tutorials or example CSS that use box-* type properties, you’re looking at the initial, now outdated version of flexbox. Here’s the property index from the 2009 spec.
  • In 2011, the spec awkwardly changed for a bit. A flex container was defined using display: flexbox, or display: inline-flexbox (which you can see here). There was also a flex() function.
  • In 2012, the spec was updated to what we know today. If you see the property display: flex on a flex container, then you’re with the times.

It looks like the current version is here to stay, and it is very comprehensive. Here’s the current spec from the W3C that contains every detail.

Flexbox in Action

That’s enough talk about flexbox, let’s now take a look at a basic example. Here’s our markup:

<div class="container">
  <div class="item">
    <h2>Item 1</h2>
  </div>
  <div class="item">
    <h2>Item 2</h2>
  </div>
  <div class="item">
    <h2>Item 3</h2>
  </div>
  <div class="item">
    <h2>Item 4</h2>
  </div>
</div>

And here’s the CSS to put flexbox in action:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  padding: 20px;
  width: 22%;
  background-color: rgb(255,150,100);
}

This makes the .container element our flex container, and the .item elements our flex items. Here’s a CodePen demo:

See the Pen imJGz by SitePoint (@SitePoint) on CodePen.

This all seems well and simple enough, but don’t get too excited. We have quite a few things we need to consider before using this CSS feature.

Browser Support and Polyfills

It’s pleasing to know that browser support is high and increasing, and we can see the breakdown by having a look at flexbox on Can I use…. It’s supported in IE10 and higher, and across all other browsers except Opera Mini. This is pretty awesome to see. If you’re looking out for IE9 and below though, you’ll need to go down the polyfill/fallback route.

Unfortunately, the only polyfill available is Flexie, which enables the 2009 flexbox model on unsupported browsers. There are no polyfills for the new syntax (although Richard Herrera, who created the original flexbox polyfill is working on one for the updated syntax). In any case, you’ll find yourself wanting to stay clear of polyfills to begin with, as they tend to be slow.

Fallbacks should be generally easy to implement. Modernizr, a feature detection tool, allows us to detect if a browser supports flexbox (legacy and current), so targeting should be easy, and should look something like this:

.container {
  display: block;
}

.flexbox .container {
  display: flex;
}

If Modernizr isn’t your thing, and you’re not heading down the Opera road, then conditional CSS may be all you’ll need to help you sort things out for IE9 and down.

Vendor Prefixes

The syntax for flexbox as shown above looks concise and pretty, but that’s because I haven’t even begun to talk about vendor prefixing. Flexbox is a near nightmare with vendor prefixing, and that’s mainly due to the fact that the spec has changed 3 times in 3 years. Older WebKit browsers are still using webkit-prefixed properties, and some of them are still using the 2009 implementation.

If you need to support all these older implementations, you’ll need a host of *-box, *-flexbox, and *-flex prefixes. The compiled CSS for our .container would look like this:

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

That’s not pretty! But there are solutions at our disposal.

Autoprefixer

Autoprefixer is a great and up-to-date tool that will automatically prefix your CSS for you. You can set it up as a Grunt task, and have it watch your stylesheet for changes. It’s a beautiful tool, and will save you tons of headaches.

Sass and Compass

Sass can also come to the rescue here, as long as we set up some mixins to get us going. Here’s a set of Sass mixins and a basic implementation, taken from CSS-Tricks’ guide to flexbox:

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.container {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

Compass is a CSS authoring framework that offers a ton of mixins for authoring our Sass files. They do have a mixin for flexbox, but unfortunately it’s for the old syntax. However, Autoprefixer (mentioned above) integrates nicely with Compass, and handles all the prefixing for you without having to change your workflow. Neat.

Finally, if you’re using PHP as your CSS preprocessor, you might want to have a look at Flexbox Functions that provides some easy-to-use methods for dealing with the various parts of flexbox.

So… Are We Ready to Use Flexbox?

We looked at what flexbox is, where it came from, how to use it, support, fallbacks, prefixing, and the works. But still, we have to ask ourselves if we’re ready to start implementing it in our projects. For me, the answer is a resounding Yes. But that resounding yes has some underlying emphasis:

  1. Know your project, your desired outcome, and your target market. If you’re publishing HTML5 mobile apps, then go for it. If you’re developing an accounting system for a business using Windows 98, you’ll probably need to stay away!
  2. Understand that polyfilling the old version might help you out, but will slow down the already-slow browsers. In general, I recommend staying away from polyfills — there’s no point further slowing down an already old system.

So go on out there and learn, practice, and implement flexbox in your next suitable project. It’s a fantastic and powerful feature, and is a lot of fun to use.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • MattDiMu

    Nicely written, but i must disagree on the conclusion. The browser support simply isn’t good enough for a structuring technique like flexbox. If it was some fancy design-feature like rounded borders or background-gradients, it wouldn’t be problematic if ~20% of the users see the fallback version.

    I don’t think, however, that saving some div-tags and a bit of Css is worth ~20% of the users seeing a broken page and if i create a fallback-version with better supported Css-properties, i don’t really see the advantage as i then need to implement the structure twice.

    • callmenick1

      I personally wouldn’t use it in systems where I needed a million fallbacks to make it look and work right, so I agree with you in that sense. But that was exactly the point of my conclusion – know your market. If you deploy an HTML5 app for iOS, then there’s absolutely nothing stopping you.

      A lot of developers are also using flexbox in their own CodePen demonstrations for layout purposes. They know who their target market is (other developers, likely using Chrome/Firefox), and if people are using unsupported browsers, it falls back to a linear layout. All the more reason for my point “yes, but with underlying emphasis”.

  • Craig Buckler

    I like the optimism, Nick, but I tend to agree with MattDiMu – flexbox is a little too unreliable on even the latest browsers. I’d be wary about using it for page layout but would consider it on smaller elements which could fall back to a linear view. That said, I have a feeling CSS grids will be easier and have better support before flexbox really takes off…

    • LouisLazaris

      Are there differences in the implementation on modern browsers using the standard code? Or are they browser bugs with the new code? I would expect, for example, problems with the older code, but not the new code, at least nothing major.

      I think if your target audience are non-IE-modern-browser users, then I would definitely go with Flexbox, assuming of course there are no major bugs. And that’s pretty much what Nick said in his conclusion, so it was “Yes” but with some clear warnings.

      • Craig Buckler

        I agree with the assumption but there are relatively few mobile-only HTML5 apps being developed in relation to RWD sites. For the moment, I take pragmatic approach, i.e. forget about shims but use flexbox on elements which wouldn’t break if flexbox wasn’t supported.

        • callmenick1

          Fair enough, and point noted.

    • callmenick1

      I’ll just call an echo to what Louis sad. CSS grids looks promising too, but the reality is that we CAN indeed start using flexbox in our projects today – think HTML5 mobile apps (as mentioned in the conclusion).

  • Petit Paul

    The exemple in CodePen does not work in Safari 7.0.5 which is the latest version as of MacOS X 10.9. It works in Chrome and Firefox, though.

    • LouisLazaris

      That was my fault. Sorry, I’ve fixed it now. When I converted Nick’s demo into SitePoint’s CodePen account, I forgot to check the “autoprefixer” box in CodePen. I’ve tested it on Safari 7.x on my Macbook and it should work fine now.

      Thanks for the heads up!

  • callmenick1

    Haha, it seems a mess from the outside, and I was a bit unsure the first time I looked at it. But I believe there is clarity ahead, and like I said in my last point, as long as you know your target market, you’ll be safe in implementing it.

  • callmenick1

    Thanks for pointing that out Pete, good to know.

  • http://comicbook.com Adam Dillon

    I used flexbox on the redesign of http://comicbook.com and had great success. I used polyfills for the older ie browsers. It didn’t take much, especially designing from mobile first. At the very least, the users will get a tube of content with seems ok for the most part.

    • callmenick1

      Nice, awesome to see a production implementation. Tested on IE8 and it falls back as you’d expect, linear easy to follow layout. I imagine IE8 users wouldn’t even know that they’re missing out on anything!

  • callmenick1

    Awesome, thanks for the demo link!

  • callmenick1

    Curious about the bloat though…is it any more than implementing a CSS responsive grid system?

  • http://webplatformdaily.org Šime Vidas

    Nobody wants to see vendor prefixes in their CSS. That’s why we use Autoprefixer :-P