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.

Notice overflow: hidden type of behavior is the default here because flex-wrap is unset.

Flex Wrap

wrap
row-reverse

Justify Content

flex-end
center
space-between
space-around
space-around

Align Content

align-content: space-evenly

Real-Case Scenario

Combining Vertical Align and Justify Content

Space Evenly

Responsive in a much more natural way with an even number of items.
Perfect vertical align with multiple items and varying item height.

flex-direction: row; justify-content: [value];

flex-direction: column; justify-content: [value];

Make Sure To Specify Element Size Explicitly

Limited Time Offer

CSS Visual Dictionary 28% OFF for Medium readers.

28% OFF

Medium Readers Only:

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store