Have you read multiple articles on flexbox and still feel you don't fully understand it? You're not alone.
The problem with how flexbox is taught is that the most important property is taught last. By the time you get to it, you have to mentally juggle dozens of combinations of the less important ones. In this article, I will walk you through all the concepts in an order that makes more sense to me, and hopefully to you as well.
Forget everything about the parent except
display:flex. Think of flex as items in one line. The line may be vertical or right-to-left, but for now, it's a line.
flex-shrink to 0. Forget them. You're basically in
display:inline world, except it doesn't wrap yet. This is what we have from now:
This is the most important property. Learn what values
50% do. That's the starting point for your child elements widths.
You can play around with the Codepen below, or read this excellent article by Dave Geddes, whatever you wish.
Now just for a minute, think of
flex-basis as the width of the child elements.
You may want to have the children grow. All of them equally? Only the last one? Does one child deserve more? Try different combinations of
You may want to have the children shrink. Just like
flex-grow redistributed remaining space,
flex-shrink will redistribute negative space. Again, it can take from all children equally, from only one, all but one...
Whatever width an element will have after this step will be his true
flex-basis is what was before.
Congratulations! You know 90% of what there is to know about flexbox. If you've been reading about flexbox already, you probably know everything else too. But, on the off chance you want to keep reading, I'll go on.
order lets you re-order child elements at will. Keep in mind that accessibility rules say the visual order of elements that form a meaningful sequence should match their order in the DOM.
If a child element has a smaller height than the parent, you may want to center it vertically or align it to the top:
align-self does just that. Since, as I said at the start, our line may be vertical or right-to-left, this property doesn't use keywords like "top", opting for the flexible
OK, we're done with the children! To the parent now.
When I said "the line can be vertical", that's what
flex-direction: column does. Whatever I said about
flex-basis as a width would then be about height. Same concept, different direction.
flex-wrap may be obvious in itself, it can be tricky when combined with other properties.
Let's try an example. Below is a 500px parent (red) with three identical children (blue) that have
flex-basis: 200px and
flex-grow: 1. One could think that with identical markup, content and styles, they'd look the same, and yet the third one is twice bigger than the rest. Why?
To illustrate the children's
flex-basis, I have added grandchildren (green) of width 200px:
Here's what happened:
- The browser started with the
flex-basisand tried to fit the 200px children in lines inside the 500px parent.
- Two children fit in the first line, and the third one went to the second line.
- Once this was done,
- In the first line, 100px were equally distributed: 50px went to each child.
- In the second line, there were 300px left to distribute among only one child.
Since items that don't fit in the current line are pushed to the next one, does
flex-shrink apply at all? I'll leave this one as a question for the reader.
In this case, items will be laid out in columns. This MDN article has an example:
For a deeper understanding of
flex-wrap, here's a good article.
The excellent article A Complete Guide to Flexbox on CSS-Tricks explains them really well, probably better than I could. I'm leaving you in good hands.