Flexbox App
the interactive cheat sheet for Flexbox
Start with a fresh canvas
...or try an example

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!

Try one of our examples
Screen2
Holy Grail Layout

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.

Screen3
Sticky Footer

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.

Screen1
Overflowing Content

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.

Built with React

How can we help you?

We are developers and designers helping our clients build innovative web products.
Let's talk about your project and find out how we can support you!

Or call us +49 221 16 92 34 98

We develop sustainable web applications. Check out some of our other projects and get in touch.