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.

Basically — it will simply expand container height and wrap items down a line.

Note: container height is not specified (auto / unset) but still expands.

wrap

This is a common pattern when you have an unknown number of items with unknown content size and you want to display them all on the screen.

Reverse actual order of items with flex-direction: row-reverse.

row-reverse

Perhaps this can be used for content with right-to-left reading order.

You can “float:right” all of your items that fit on the same line with flex-end.