Flexbox: The Animated Tutorial

Explaining Flexbox concepts using easy-to-understand animations

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

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

Flex Wrap

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

wrap
row-reverse

Justify Content

The justify-content property determines the horizontal align of flex items.

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

Align Content

All of the examples above dealt with the justify-content property. But you can also align things vertically in flex even when it comes to automatic rows.

align-content: space-evenly
  • Rows of items are aligned with equal vertical margin space.

Real World Scenario

In an actual layout, you will not have a bunch of alphabet letters in a straight line. You will be working with unique content elements. I just wanted to quickly demonstrate how flex works by animated examples up to this point.

Combining Vertical Align and Justify Content

At some point you’ll probably need your content to be center-justified.

Space Evenly

Using space-evenly for both align-content and justify-content will produce the following effect on a set of 5 square items:

Not very responsive in a natural way with an odd number of items.
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

If you don’t do this, some flex scaling will simply not work.

For More Weekly Updates

  • You can follow me on Twitter for weekend PDF giveaways.
  • Follow me on Instagram for a quick hit of JavaScript.
  • Follow me on Facebook for free coding stuff.

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