Calvin Spealman
The web development community has a habit of declaring "firsts" those practices and approaches that reach some ill-defined status signaling they are the go-to way to solve a particular problem. We've seen "mobile first" and, more recently, "offline first." In these examples, a new problem comes along and as that problem grows more common there comes a tipping point. On the other side of that tipping point, it begins to make sense to solve the problem from the ground up, rather than building a project and solving it as an afterthought.
As a concrete example, for "mobile first" this meant realizing it's a lot more difficult to retrofit mobile layouts into existing desktop sites than it is to build mobile websites that expand to fit larger, more capable devices.
With "offline first," we focus on building offline-availability into our web applications by constructing them to function totally in the browser and primarily offline. This way, online features become secondary and optional, similar to building a traditional native application.
The pattern is that when it’s hard to add something to a project, like mobile layouts or offline features, it is often easier to approach the problem from the opposite direction. Applying the relatively new CSS Flexbox rules has had the same problems. It is difficult to add to existing websites with large established layouts. This is especially true if you need to support browsers with incomplete or non-existent flexbox support.
Flexbox is Ready
The flexbox standard went through a rough early phase. Its original incarnation began to be rolled out in browsers several years ago, only to be found wrought with problems so bad the spec was entirely replaced by what is the current CSS Flexbox Module. The transition for browsers that had already implemented some or all of the failed version meant a difficult couple of years waiting for vendors to catch up with the turn-about.
Today, Flexbox is well supported across every important browser including mobile versions of Safari, Chrome, Firefox, and Opera. Even as far back as Internet Explorer 10 includes flexbox support (with some well documented and easily avoided pitfalls).
The shortcomings in support across some browsers are easily outweighed by the vast improvement in the way we approach web page layout. More than that, by deciding flexbox is the primary way you'll lay out your site you afford a huge list of advantages.
Flexbox is Better
A better way to do layout
CSS has grown in fits and starts over more than a decade with often painful standardization processes. This has led to a hodge-podge of properties and behaviors from which web developers have had to piece together solutions that stand up on a wide range of devices and browsers.
Flexbox is one of the most concise and wholly formed standards to be added to CSS. Rather than attack a single problem, or provide a new, simple layout feature, Flexbox aims to provide a holistic set of rules you can use for a wide range of layouts. This also means Flexbox essentially deprecates the usefulness of a whole host of previous CSS properties.
With Flexbox, we have a set of rules for a reasonable layout we can apply to our whole site, to the unique layouts of special pages, and to the interactive layouts of widgets across our projects. We can reuse the techniques we learn more easily as well as better predict what is going to work and where the limitations and edge cases lie.
The few exceptions don't break that rule
Inevitably every abstraction is going to get leaky and Flexbox won't be an exception to that rule. But, when you have a coherent set of rules that gets you most of the way to your goal, those few exceptions are a lot easier to manage. Fallbacks for the few corner cases in browser support or an edge case layout you can't quite get to work within the flexbox system are much easier to apply peppered at the end of a very concise process that gets you almost everything in one go.
Flexbox has Caveats
Internet Explorer 10 and 11
Unsurprisingly, you'll get the roughest edges from Internet Explorer (and Edge). These caveats are relatively minor, though. There has also been some great work at documenting all the IE Flexbox issues and their workarounds. If you read up on this, you can establish your own guidelines for how to use Flexbox so that you won’t even hit any of these issues.
Old IE and other non-supporting browsers
If you're a lucky developer you only need to support the latest and greatest browsers with the best support for modern features. Most of us aren't that lucky all the time, so the necessity will come up to support browsers with older, partial, or non-existent Flexbox support. Addressing this is another article unto its own. If this concerns you about diving into Flexbox First, I hope it will calm those worries to know there are strong approaches to handling these browsers without totally disrupting the value you get out of Flexbox itself.
Begin with a focus on the layout and the browsers that support Flexbox best. That's a core rule of going Flexbox First. If you need to support older versions of Android browser, Mobile Safari, or Internet Explorer, take a look at them only after you've established a strong baseline in the modern browsers. Don't look at these as targets you need to replicate the design in, though. Supporting Flexbox layouts on older browsers that totally lack it is a cause for applying graceful degradation. If you focus on perfectly replicating the same layout on both compliant and noncompliant browsers, you are only duplicating an effort that entirely erases the advantages you'd otherwise have gained. Instead, focus on providing a good experience on par with those browsers. Treat this as another aspect of responsive design, in which we accept and react to the range of abilities between devices that our content gets pushed to.
Flexbox bug repository
All of these issues are relatively easy to work with when you're familiar with the problems up front, so I recommend reading over the currently documented list at the Flexbugs repository. Check the list every now and then to find if there are any new issues discovered, or old issues fixed in new updates to browsers.
Flexbox is Today
If I've convinced you and Flexbox isn't something you have much experience with yet, there are great guides available. You can find A Complete Guide to Flexbox from CSS Tricks available online. For a light introduction, everyone should check out the delightful Flexbox Froggy interactive tutorial.
Try the tutorial to get a feel for how Flexbox works. Absorb the reference guide to get an in-depth understanding of all the Flexbox mechanisms. Try building your next website using everything you learn.
