Flexbox — The Animated Tutorial

In my previous tutorial I dumped all of the flex diagrams in one place to show you flex box bird’s eye view — but it’s not enough.

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

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

To get a good idea of how flex works try flex layout editor on this page.

If a picture is worth a thousand words — how many more animation? Flex cannot be efficiently & fully explained by text or static images. To cement your knowledge of flex I created these animated samples.

By default flex will not wrap your items. It works a lot like overflow: hidden;

The first thing you will probably learn about flex is flex-wrap.

Flex Wrap

Let’s add flex-wrap: wrap to see how that changes flex item behavior.