Flexbox is Ready for Production

Flexbox is Ready for Production

Over the past two years I've done several talks and created a Lynda.com course about the amazing new CSS Flexible Box Layout Module (a.k.a "Flexbox"), and every time I show it to people, they have the same two reactions:

  1. Wow! This is amazing! It will solve so many problems!
  2. Unfortunately I can't use it yet because [various reasons].

The first reaction is one shared by anyone who has used Flexbox: It really is amazing, and solves a lot of the most confounding and frustrating problems we have with CSS positioning, floating, clearing, and general layout.

My answer to the second question used to be "use it now, with proper fallbacks". That has changed:

As far as I'm concerned,
Flexbox is ready for production.

You should use Flexbox right now, in your personal and your client projects. It is ready. And with the help of some clever code, it even works where it shouldn't.

Flexibility to the rescue

A few weeks ago I stumbled over a tweet from someone at web and WordPress agency 10up linking to a GitHub repository called "Flexibility". After playing around with it for about an hour, my reaction could be summed up in two words: "Holy Shit!"

Flexibility is a simple JavaScript shim that ports Flexbox support back to Internet Explorer 9 and 8, removing the main argument against using Flexbox in production: backwards compatibility.

It's a bit of a hacky solution: You add flexibility.js to the head of your HTML document, add the new proprietary property -js-display: flex; to any place in your CSS where you currently call display: flex;, and the JavaScript does the rest.

For a full explanation of what's happening, check out the GitHub repository.

But [insert your objection here]

I've been raving about flexibility.js for a couple of weeks now because I think this is the long awaited shim that makes Flexbox a reality on the web and allows us to move forward with modern CSS. Not surprisingly, my raving (and that of others) has been met with a fair bit of skepticism, so let me address some common concerns:

1. We Shouldn't Support Older Versions of Internet Explorer

The most commonly voiced objection to using Flexibility is that it provides support for older versions of Internet Explorer. The general argument goes something like "We shouldn't support older versions of Internet Explorer. Doing so prolongs its life, and we are moving backwards rather than forwards."

Internet Explorer hating is a favored sport among web developers, and this is a standard argument brought up any time someone proposes a backwards compatibility solution for IE. Here is my counter argument:

Though IE9 and IE8 have tiny and quickly diminishing usage numbers, it is a long tail situation. The reasons why people still use IE8 (IE9 will phase itself out shortly) have nothing to do with preference and everything to do with infrastructure and economic situations. Most people who use IE8 today either can't afford to upgrade their computers, or are behind systems that for one reason or another don't allow such upgrades (typically large enterprise systems or institutions like banks, travel agencies and airlines, academic institutions, governments, etc). Anyone providing a solution that serves or may be of interest to such users must provide proper fallbacks. Not doing so is, quite frankly, not doing your job correctly. 

2. A Shim Is Not Needed If You Do Things Correctly (a.k.a. Progressive Enhancement)

Progressive enhancement is awesome and allows us to use modern and future technologies today while still providing a great experience for those on older browsers or technologies. And it's true that we don't technically need Flexibility to use Flexbox today: Because flex gracefully degrades to regular display: block; and overrides any floats in CSS, we can safely create basic block-and-float layouts that are progressively enhanced with Flexbox when the browser supports it. I do this all the time and so should you.

However, there are times when using Flexbox as progressive enhancement becomes a major make-work project. Unlike text shadows, rounded corners, and web fonts, Flexbox is a layout module that can be considered a breaking feature unless extensive fallbacks are provided:

The whole point of Flexbox is that it allows us to not only simplify advanced layouts, but also do new things. Using Flexbox we can change alignments, both horizontally and vertically, make equal-height columns, even reorganize content using CSS. Making fallbacks for some of these functions can become a major chore, and the typical result is that the developer writes it off as not worth the investment. 

The result of this is that the developer avoids Flexbox to avoid extra work. And this is the exact scenario where Flexibility fits in: It takes away the need to do a massive amount of extra work to provide Flexbox as progressive enhancement and allows us to start thinking of CSS layouts with a Flexbox frame of reference.

3. I'm Not Loading A Whole JS Shim Just For Flexbox

In our ever more performance driven environment, people are hesitant to load unnecessary content into the browser. This is justifiable and good development practice. It is not a good argument for avoiding a tool like Flexibility though, for two simple reasons:

First, Flexibility.js is 6.6KB. Any one of the multiple images you load in your documents is substantially bigger than this, and 6.6KB is a small price to pay for Flexbox-based layouts and convenience.

Second, and more importantly, you can serve up flexibility.js in such a way that it only loads in the appropriate browsers (IE9 and IE8) using simple conditional statements.

4. This Looks Like Way Too Much Work

When I first looked at Flexibility, my standards-obsessed brain got all itchy. JavaScript shims should be seamless. This one requires adding clunky proprietary code in my CSS. I do not like that one bit. Then I realized I do this all the time with other properties to ensure backwards compatibility. Or rather my preprocessor does. So really, this is not an issue at all.

For production I run all my CSS through PostCSS to ensure everything is nice and clean and add in backwards compatibility when required. PostCSS now has a neat little plugin called postcss-flexibility that adds Flexibility support to the process. In other words, the process is entirely automated and can be removed once Flexbox support is green across the board.

5. Why Should I Trust You?

You shouldn't. You shouldn't trust anything you read on the web or anywhere else. Do your own research, test Flexibility to destruction, and make sure it works as advertised. Once you're satisfied it works and you feel comfortable using Flexbox in production, do it, and help the web move forward in the process. And if you like to, you can credit me for your conversion. Or not. It's entirely up to you.

On the other hand, if you feel inclined to believe me but need further confirmation, know that I'm not the only one saying this. Josh Broton popped up on Twitter voicing much the same sentiments yesterday:

And 10up, the people behind Flexibility, are using Flexbox in production for at least one major enterprise project

But like I said, don't trust what others say. Do your own research and then make a decision.

Go Forth And Flex Your Boxes

I'm repeating myself here, but it's worth it: As far as I'm concerned, Flexbox is ready for production. I'm using it already in several large projects including client sites and my newly released WordPress theme called Popper, and I will start using it en-masse in my future Lynda.com courses. I urge you to do the same. Flexbox support is still somewhat lagging in Internet Explorer and some mobile browsers, and the only way we'll get the browser vendors to implement this new technology across the board is to use it. So grab a copy of Flexibility and help pave the cowpaths for Flexbox.

Finally, I'd love to hear what you have to say about this. Agree? Disagree? Have concerns? Leave your comments below and let's get the conversation started!

--

Morten Rand-Hendriksen is a Front End Web Development Teacher, Speaker, Workshop Trainer and Author specializing in web standards and WordPress. He's a full time Senior Staff Author at Lynda.com with more than 60 courses in the library. You can watch all his courses at Lynda.com/mor10, find him on just about any social media network @mor10, and read his personal musings on his blog at mor10.com.

Andrea Castenetto

Front-end developer (Angular) • P.IVA • I make web applications

7y

I'm using it to make a layout from scratch. It embraces the intrinsic fluidity of the web. No more float, much less CSS Hacks. Flexbox is ready for production ( http://caniuse.com/#feat=flexbox ) and very easy to learn :)

Julie Cloutier

Transformational Coach, Artist, Writer, Podcaster, Speaker

8y

Thank you for this article.

Like
Reply

To view or add a comment, sign in

Insights from the community

Explore topics