The Complete CSS Flex Box 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.

Centering items in flex is probably the most common reason for using flex. So check out this how to center items in flex vertically and horizontally which is sometimes really all you need to use flex for.

(Also see this CSS Flex Tutorial on Semicolon.)

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.