Flexbox is a new CSS3 layout technology enabling developers to easily construct complex layouts. Before Flexbox, those layouts were difficult or impossible to achieve.
The Flexbox App is an interactive cheat sheet built with React. It allows you to try out all the new Flexbox attributes with instant visual feedback. Once you’re done playing around, you can use the tool to easily prototype actual Flexbox layouts - and soon also export the CSS!
The Holy Grail Layout is a page with three columns (and footer and header). The center column contains the main content, while the left and right columns contain supplemental content. Before Flexbox, this was notoriously difficult to build without ugly hacks. Flexbox finally offers a complete and simple-to-use solution.
Getting the footer to stick to the bottom of pages with sparse content is, seemingly, a solved problem. Yet all the existing solutions have one shortcoming — they don’t work if the height of your footer is unknown. With Flexbox, you can have your variable height footer cake, and eat it too.
Flexbox really shines when it comes to items overflowing their container - especially when the number of items is unknown. Implementing components with a dynamic number of children, like tabs or image grids, is plainly implemented in Flexbox. Resize the container with the little arrows in the bottom right to see how Flexbox rearranges the items to maintain a min-width of 200px.