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).