Flexbox Patterns
Part of my work involves making prototypes. They don’t have to be cross-browser, pixel perfect. They just need to work and they need to be built fast. The easiest way I’ve found is to use the Flexible Box Layout Module, known simply as Flexbox.
But if you’ve ever tried to implement it you’ve likely realized there’s a lack of good code examples on the Web. There’s plenty of documentation with assorted examples mixed in, but once I understood it conceptionally I just wanted the code. Finding the correct CSS to build the layouts required visiting multiple sites, digging around, and then, depending on what I am building, being careful not to mix the more widely supported but deprecated 2009 recommendation with the current 2012 recommendation.
Out of frustration I put together a set of examples, each with HTML and CSS. It’s not an exhaustive list but it includes patterns I routinely use. If you’re browser support guidelines mirror those of Google’s — support the current and previous major releases — then you’re in luck. The bad news is that your site will mostly fall apart for older browsers.
- Chrome 31+
- Firefox 34+
- Safari 7.1+ with prefix.
- IE 10+ with prefix.