CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.
Finally, thanks to Flexbox, we have a solution.
This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.
Check out the demos below. View the styles in the Web inspector or dive into the source to see just how easy CSS layout will become once Flexbox becomes mainstream.
Better, Simpler Grids
Flexbox gives us most of the features we want from a grid system out of the box. And sizing and alignment are just one or two properties away.
The Media Object
Create media objects with fixed or varying figure sizes without worrying about overflow, clearfixing, or block formatting context hacks.
Creating full-width, fluid input/button pairs has been impossible for most of the history of CSS. With Flexbox it couldn't be easier.
Getting your footer to stick to the bottom of sparsely contented pages has always been tricky. And if the footer's height is unknown, it's basically impossible. Not so anymore.
Holy Grail Layout
This classic problem has been challenging CSS hackers for years, yet none of the historical solutions have fully solved it. With Flexbox, it's finally possible.
A lack of proper vertical centering has been the butt of almost every CSS joke ever told. While it's technically always been mostly possible, it's never been very intuitive — until now.
Caveats and Known Issues
- IE 10 has Flexbox support but for a draft version of the current spec: (
- Safari 6 and earlier support the original Flexbox syntax, which is now obsolete: (
- Firefox 27 and earlier do not support multi-line flexboxes. See this bug for more details.
- For a full browser support comparison, check out caniuse.com/flexbox
About the Code
In addition to showcasing the power of Flexbox, this site also aims to be an example of modern CSS design and architectural practices. Namely modular, reusable style rules built on a predictable and testable naming convention.
All of the CSS code in these examples make use of the SUIT naming conventions developed by Nicolas Gallagher and are based on OOCSS and BEM methodologies. Each example includes one or more reuseable CSS components allowing you to adapt or copy these patterns in to your own projects. Links are provided to their respective components on each example page.
If you find a mistake or would like to suggest an additional example, feel free to open an issue or submit a pull request on Github.