Explain Flex-basis Like I'm Five

I am currently learning Flexbox. But I don't get this property. Help please.

Comments

[Lenmor Ld]

Sure! I'll take a stab at it 😊

TL;DR
Each scenario explained below

Scenario 1:

So let's say you have a drawer for your kitchen utensils.
Let's say width is 600mm.
You wanted to get organized so you wanted to get some drawer dividers.
You need one for forks, one for spoons, one for knives.
So you need three in total.
What's the width you want for each divider?
If you get 200mm each, then you won't have extra space to put random stuff. Maybe you want that.
Marie Kondo will be proud 👧

200mm * 3 = 600mm
no extra space

Scenario 2:

But, let's say you want to put other stuff in your drawer.
You don't know what else will be in your drawer, maybe chopsticks, napkins, can opener, etc.
But as long as you have extra space after these three fixed-width dividers
you're happy.
But the priority is still the spoons, forks, and knives
After all, you can put that thingies where they actually belong.

So you get maybe 100mm for each divider.
You want to be fancy so you got one of those adjustable ones (hope these exists).
Regular size is still 100mm, but if you put more spoons than its regular capacity, it could expand up to max remaining space of that drawer.

100mm * 3 = 300mm
so you have an extra 300mm, either for extra stuff, or for expanding the dividers when you receive spoons, forks, knives for the holidays.

Scenario 2 is when the dividers are not expanded, and you still got extra space to put your extra stuff.

Scenario 3:

You got so much spoons from your relatives during the holidays! 🥄🥄🥄🥄
So the spoon divider expands up to who-knows-what width, as long as it fits the spoon

The bad part is you don't have much extra space left anymore, you can only put chopsticks 🥢

Scenario 4:

You really want to put all your random stuff in your drawer! 😈
So it overflows your drawer!

Explanation:

switch mm to px

• Each divider size: flex-basis
  It could be 200 or 100, but it's not fixed to that width
  It's just the "default" or "regular" width if none of your contents need more space
  When they end up needing more space like Scenario 3, it will expand, leaving less extra space (thus, less extra stuff to put)

• The extra stuff you put (chopsticks, napkins, thingamabob): any item that does not have a flex-basis, they are less prioritized

• The space other than what's occupied by the expanding drawers:
  The space that flexbox have to work with after your flex-items took their spot, regardless if the item expanded or not

Technically: from css-tricks.com

flex-basis defines the default size of an element before the remaining space is distributed

I chose to not include the flex-grow and flex-shrink since it would make the example more complex, with lots of factors.
But generally, you use flex-grow when you're sure that an item will "take up" space; and flex-shrink if you're sure that this item can "give up" space

Flex-basis is good when the content inside your flex items are not known, but you want to give them a default size

Hope this helps 😁

Now you have a good idea of how I organize my kitchen utensils
Most of the time, Scenario 3 and 4 😂

[Latheresienne]

Thank you very much.