Can We Use Flexbox Yet?

Nick Green

flexbox1011-760x500

 

We web developers have been looking for the best way to deal with responsive grids for a long time, and finally a seemingly decent solution came along (the earliest version of flexbox came around in 2009). Like most new features, flexbox is worthless if browsers don’t support it, so we all put it back in the oven until it was ready. Well, browsers are mostly supporting it now.  Are we ready to move on to start using flexbox yet?

What is flexbox?

If you’ve continued to read this far, you probably already have a basic understanding of what I’m talking about. If not, here’s the tl;dr version:

Flexbox is a new layout mode in CSS3 that joins the old modes of block, inlined, table, and positioned. Flexbox layout distributes space along a single column or row. Like float layouts, but better! (further introduction to flexbox)

But, why?

Imagine a row of items with the display:flex; attribute.

  • These items will auto-size, or ‘flex’ so that all the items are equal width, spanning the parent element.
  • These items will auto-size vertically so that they are all the same height! No more explicit height setting, display:table hacks or extra javascript.

There are also tons of ways to determine where the elements wrap to the next row, how to deal with columns, and much more. A real boon, if not quite a panacea, to responsive grid layouts.

So… can we use it finally?

As usual, it depends on your browser support policy. IE9 has no flexbox support, so if that’s still on your list, forget it, unless you want to start dealing with polyfills or other hacks.

Microsoft stopped officially supporting IE10 in January of this year, which makes IE9 seem even longer in the tooth. We figure if Microsoft doesn’t even support their own product, neither will we.

The most recent version of Bootstrap (4) includes flexbox, which you can toggle with a single SASS variable. This will add all the relevant browser prefixes, which is nice for some basic IE10 and full IE11 support. As their site says, “Please be extra conscious of your user base when enabling flexbox in your project. Visit Can I use… for details on browser support of flexbox.”

We have decided to drop IE9 and IE10 as officially supported browsers, which means we are going for it. If you haven’t jumped on board, maybe you should think about it.

 

Leave A Comment