Flexbox: The Animated Tutorial
Explaining Flexbox concepts using easy-to-understand animations
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.
My Coding Books
In my previous tutorial, I dumped all of the flex diagrams in one place to give you a bird’s eye view of flex box - but pictures are not always enough, especially when there’s something better.
If a picture is worth a thousand words - what about an animation? Flex cannot be efficiently & fully explained by text or static images. To cement your knowledge of flex, I created these animated samples.
To get an even better idea you can try Flex Layout Editor on this page.
By default flex will not wrap your items. It works a lot like overflow: hidden.
The first thing you will probably learn about flex is flex-wrap.
Let’s add flex-wrap: wrap to see how that changes a flex item’s behavior.
Basically, it will simply expand container height and wrap items down a line.
Note: container height is not specified (auto / unset) but still expands.
This is a common pattern when you have an unknown number of items with unknown content size and you want to display them all on the screen.
You can reverse the actual order of items with flex-direction: row-reverse.
Perhaps this can be used for content with right-to-left reading order.
You can “float:right” all of your items that fit on the same line with flex-end.
This is different from row-reverse because the order of items is preserved.
Order is reset per line whenever item breaks occur.
The justify-content property determines the horizontal align of flex items.
It looks a lot like the previous example…except the item order is preserved.
In the following example (justify-content: center), all items will naturally flock to the center of the parent container — regardless of their width. It’s similar to position: relative; margin: auto on regular elements.
Space between means that there is space between all inner items:
This next one seems almost identical to the one above. That’s because it’s an entire alphabet we’re looking at here. With fewer flex items, the effect would appear more distinct. The difference is the margin on the outside of corner items.
Property space-between (above) has no outer margins on corner items.
Property space-around (below) creates equal margins around all items.
The next animation is the same example, but with a wider middle element.
As you can see here, you still have to experiment with flex in the context of your own content in order to achieve results that make sense for your layout. This is why I decided to make this tutorial. Even animated examples are limited to item size. Your results may differ based on your content dimensions.
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.
Properties justify-content (all examples above) and align-content (below) take exactly the same values. They just align in two different directions — vertically and horizontally with respect to the number of items stored in the flex container.
Let’s explore how flex handles vertical align:
A few observations about space-evenly:
- Flex automatically allocates enough vertical space.
- Rows of items are aligned with equal vertical margin space.
Of course you can still change the height of the parent explicitly and everything will still be properly aligned.
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.
But when it comes to actual layouts, you will probably want to start using flex with fewer items that are larger in size. Something that resembles actual website content.
Let’s take a look at a few ideas…
Combining Vertical Align and Justify Content
At some point you’ll probably need your content to be center-justified.
Using space-evenly for both align-content and justify-content will produce the following effect on a set of 5 square items:
When it comes to out of the box responsive areas with flex, first make sure to keep the width of your items the same wherever possible.
Note that because the number of items in this example is odd (5) this case will not produce the ideal responsive effect you’re probably looking for. Using even numbers can solve this subtle problem.
Now, consider the same flex properties working together with an even number of items:
Centering items inside an element vertically has been a huge problem in layout design for over a decade.
Finally solved with flex. (Uhh… you can do it in css grid too.)
But in flex, using the space-evenly value in both dimensions will automatically space your content even with variable item height:
The above is the depiction of the most commonplace use of responsive flex for the next 10 years (that was a joke). 😆
If you are learning flex, you will discover that this is perhaps the most useful set of flex properties in general.
And finally here are all possible values in one animation:
flex-direction: row; justify-content: [value];
flex-direction: column; justify-content: [value];
I recommend that you use these types of flex items inside CSS grid. (You’ll naturally figure that out the more you use grid + flex.) But there is nothing wrong with flex-only layouts either.
Make Sure To Specify Element Size Explicitly
If you don’t do this, some flex scaling will simply not work.
Use min-width, max-width and width / height accordingly.
These properties can make a difference to your whole flex scalability.
That’s it! I hoped you liked this article.
For More Weekly Updates
- You can follow me on Twitter for weekend PDF giveaways.
- Follow me on Facebook for free coding stuff.
If you wish to support my work, CSS Visual Dictionary is my book.
The diagrams in this tutorial were influenced directly from the manuscript!