CSS Flex — Interactive Tutorial

I’ve gone over pretty much every single existing flex tutorial from froggy to the official W3C documentation. But there is one thing you will never learn about flex without an interactive example: Behavior of properties when the size of an *individual item changes. You can see what I mean below:

CSS Visual Dictionary

You can Follow me on Twitter to get tutorials, JavaScript tips, etc.

If you want to experiment with it yourself go to live flex layout maker now to craft your own flex layouts.

I created this new flex tool overnight and gradually improved it over the course of the next few days. The rest of this tutorial will provide a few insights of what I discovered while playing around with it!

What I Learned About Flex While Designing The Flex Generator

There are a few interesting quirks about flex that may not always be obvious at first. For example, narrow items don’t stretch and behave like flex-start even if stretch is applied. Below I will…