The CSS Flexible Box Layout Module Level 1 (or Flexbox) is a box model specification in which the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. In other words, it’s a neat way for front-end developers to layout content in a way that isn’t just “left to right, top to bottom”.
But I’m not here to tell you what Flexbox is, nor am I here to tell you how to use it. At the end of this post are a few links that can cover that for you well enough. No, what I’m here to tell you is that right now you in fact can use Flexbox. Go ahead! Use it! Before vender prefixes were added, browser support for Flexbox had been sporadic and not very well adopted. It was possible to use Flexbox on any project you wanted, but the problem was it wouldn’t work on a majority of browsers and mediums. Now (looking at this Can I Use chart), adoption is so widespread it’s almost universal.
The only problem is (say it isn’t so!) Internet Explorer. Trying to use the flex box model on anything earlier than IE10 just isn’t going to work. This is the main issue, and unfortunately it’s a pretty dang big issue.
The solution? Go ahead and use Flexbox, just be sure to contain it to mobile devices (or progressive enhancements). Most uses that I’ve had for needing to adjust the box model layout in a way that required Flexbox were design changes from desktop to mobile devices. Say you’ve got a two column layout with your main content and a right-hand sidebar. If you wanted that sidebar information to float to the top of your page on a mobile device above the main content, you were going to have a difficult time. With Flexbox however, it’s pretty simple. And if used in conjuncture with media queries or Modernizr, keeping any usages of Flexbox limited to mobile device should be simple as well.
At the time of this posting, I’m not aware of any shims or polyfills to make Flexbox work on IE9 and earlier, so it’s not looking like widespread adoption of Flexbox in Internet Explorer will be happening anytime soon, but never say never! And regardless of that, it is now finally a good time to start use Flexbox on mobile devices!
If you’d like to learn more about using and implementing Flexbox, here are two links from Chris Coyier of CSS-Tricks:
