Imagine the elasticity of a slinky with the shape shifting ability of an animal balloon—the possibilities of amusing kids across the globe just grew 10-fold. Now move that kind of flexibility and shiftiness into web design and you’ll find a lot of very happy designers and developers, that is as long as they’re aware of this goodness called Flexbox.
But Flexbox has been around for years without much traction in the mainstream venues. Why now?
Responsive web design has proven to be much more than a passing phenomenon, so much so that even Google has recently just revealed that if your sites aren’t mobile friendly, don’t expect to find them in the results of Google searches on mobile devices. If you’re not sure if yours is up to snuff, use Google’s mobile friendly test to find out. Responsive design is a way of dynamically adapting your site to your users’ conditions, such as their device, device orientation, browser width and/or height, bandwidth, etc. It’s basically putting your users first, which is usually good for business.
Not long ago, the CSS Regions module level 1 (only supported by Safari and IE10+) once promised to enable killer responsive layouts by allowing the reflow of content from one element to any other element on a page regardless of position…and it does seem to work magically where supported. Unfortunately where it’s supported is extremely limited, and recently even Google discontinued pursuit of implementing it in Chrome, which is as good as the kiss of death for now.
Like CSS Regions, Flexbox also offers layout capabilities not possible with standard CSS properties. Better yet, it’s now supported by all major browsers including IE10+.
So what can Flexbox do that both designers and developers need to realize? Rather than me listing every possibility for you here, check out this Flexbox cheat sheet or read Chris Wright’s extensive exploration of the strengths of Flexbox, the strategy behind it, and multiple experiments including troubleshooting techniques.
My personal favorite capability of Flexbox is the ability to reorder the visual layout of elements from one break point (or media query) to the next as I see most fitting. Check out this codepen depicting how the order can be adjusted just by resizing the browser’s width. Although creating equal height columns and navigation that flexes the entire width of the page are close seconds.
In any case, whether you’re a designer or developer, Flexbox is ready for prime time and will definitely change how you think about responsive layouts.