CSS Flex—An Interactive Tutorial

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.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

Image for post
Image for post
If you want to experiment with it yourself go to live flex layout maker now to craft your own flex layouts.

I’ve gone over pretty much every single existing Flex tutorial from froggy to the official W3C documentation. But there is one thing you will never learn about Flex without an interactive example: the behavior of properties when the size of an *individual item changes. You can see what I mean below.

Check out CSS Visual Dictionary with all CSS properties explained visually.

I created this new Flex tool overnight and improved it over the course of the next few days. The rest of this tutorial will provide a few insights into what I discovered while playing around with it!

There are a few interesting quirks about flex that may not always be obvious at first. For example, narrow items don’t stretch and behave like flex-start even if stretch is applied. Below I will walk you through the rest of them.

Keep on reading if you want to consume this tutorial visually!

I’ll display all possible cases and briefly discuss the Flex quirks I found that you might want to know about (or, at some point will stumble into.)

The flex-start value is the default. There is really not much here other than it looks a lot like the slowly becoming obsolete float: left:

Image for post
Image for post
flex-start

The flex-end value behaves similar to float: right; Here are two items:

Image for post
Image for post
flex-end

Remember back in the day you instinctively typed float: center, but were disappointed at the fact that nothing happened in the browser? Flex to the rescue. The center value acts as you would expect:

Image for post
Image for post
flex-center

The space-between, space-around (next one) and space-evenly seem to produce similar results, at first. But try changing the number of items. Then it becomes obvious that the three layout options have unique properties.

Image for post
Image for post
space-between
Image for post
Image for post
space-around
Image for post
Image for post
space-evenly

And finally…

The stretch value is a bit quirky. It only stretches items if they are large enough. What I mean by “large enough” is usually at least 100% of the container. Try making them smaller. You will see that the items start to float left again, like with flex-start, even though it’s not present:

Image for post
Image for post
space-evenly

Finally, there is also a separate version of the flex editor. It contains only one row, but in addition, has shrink and expand buttons.

Because sometimes shrinking the width changes everything. Items might start behaving a lot like stretch, even though it isn’t set. But that’s natural working with Flex. Just something to be mindful of:

Image for post
Image for post
Interactive Flex layout builder was designed specifically to help learn the behavior of flex under different conditions when the size of each individual item is changed in real time. You can test the live demo on my site. To start crafting your own flex layouts go to live flex layout maker now. (Other CSS tools are also there.)

In the same way, this Flex generator helps you learn the behavior of flex layouts by interactively changing the justify-content property, modifying the number of items, and dragging and dropping (shrinking or stretching) the width of each individual item.

The diagrams in this tutorial were influenced directly by the manuscript!

Image for post
Image for post
CSS Visual Dictionary 28% OFF for Medium readers.

CSS Visual Dictionary

== grab a copy ==

Contains all CSS properties

Written by

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