Flexbox Myth Busting
If you write CSS with any kind of regularity, then chances are you have heard of ‘flexbox’ (Flexible Box Layout Module). You might have even heard that flexbox can solve many problems that are thought hard or impossible to solve without the aid of Javascript. But you might have also heard or assumed a few barriers to leveraging flexbox this early. In this post I will be debunking many ‘myths’ that surround this powerful layout model.
Myth #1: Flexbox is Slow
CSS Flexible Box Layout Module has undergone a lot of changes since its first appearance in 2009. The specification and what the browsers have implemented has evolved, resulting in multiple versions of the syntax. In 2013, a case study on Smashing Magazine identified performance issues related to the use of the original (legacy) flexbox that used display: box. This performance issue has since been rectified with the newer version which uses display: flex and is 2.3× faster than the older flexbox.
Myth #2: Flexbox Lacks Good Browser Support
Contrary to what some still think, browser support for flexbox is good (83% globally as of late 2015). With full support in the latest releases of every major browser, you can begin to use it in your own work without much worry. In addition, you can support older browser versions by mixing in earlier versions of the flexbox syntax and leveraging browser prefixes.
In many instances, flex box properties can co-exists with non-flexbox properties. This allows you the ability to use floats or table for a base layout and then override these properties with flexbox in supporting browsers. In instances where this will not work, feature detection will allow you to target supporting and non-supporting browsers individually. This approach comes in handy for browsers like >=IE9, where a fallback is necessary as long as you support these browsers (as of late 2015, global support is at ~1% for IE9).
Myth #3: Flexbox is Too Complicated
As with anything new, the flexbox syntax can seem daunting at first glance. Traditionally, developers had to rely on tables, floats, or inline-blocks for the job; all of which were limited and fraught with drawbacks. With flexbox, developers now have a more efficient way to lay out, align and distribute space among items in a container. This is especially handy in responsive layouts where flexibility is a necessity. In order to create this flexibility, we need a more robust way to deal with layout.
But flexbox isn’t too complicated — it’s just a different way to think about layout on the web. Once you get a grasp on how it works, you immediately realize its power. In addition to this, there is no shortage of resources on the web to help you learn the flexbox syntax (check out Chris Coyier’s Complete Guide to Flexbox or this handy tool by Bennett Feely for starters).
As you can see, the barriers to using flexbox in your work now are either nonexistent or are easy to work around. Not only can it be leveraged to achieve things once thought impossible without Javascript, but it can also improve your layout in browsers that support it without affecting older browsers. So go forth and start flex-boxing.
