CSS Flex — Interactive Tutorial
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: Behavior of properties when the size of an *individual item changes. You can see what I mean below:
CSS Visual Dictionary
Contains visual diagrams for every single CSS property in common use.
I created this new flex tool overnight and gradually improved it over the course of the next few days. The rest of this tutorial will provide a few insights of what I discovered while playing around with it!
What I Learned About Flex While Designing The Flex Generator
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.
Here Are The Complete Visual Examples
Keep on reading if you simply 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:
The flex-end value behaves similar to float: right; Here are two items:
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 just as you would expect:
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 the three layout options have unique properties.
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, and you will see that the items start to float left again, just like with flex-start even though it’s not present:
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 to working with flex. Just something to be mindful of:
In the same way this flex generator helps you learn behavior of flex layouts by interactively changing justify-content property, modify number of items and drag & drop (shrink or stretch) width of each individual item.
Limited Time Offer
The diagrams in this tutorial were influenced directly by the manuscript!
Grab Your Copy!
Contains all CSS properties