The Complete CSS Flex Tutorial

Much like CSS Grid (my other tutorial) Flex Box is quite complex because it consists of not one but two element types: The container & items.

When I started to learn Flex, I wanted to see everything it was capable of. But, I wasn’t able to find a thorough tutorial showing examples of all Flex properties. So, I created these diagrams with Flex from the bird’s eye view.

That’s everything Flex is capable of. But… let’s go over each diagram individually with comments. By the end of this Flex tutorial you should be up to speed with pretty much the complete picture of what it can do.