In which scenarios is flex-basis useful, how does it differs from min-width?
Hello, was just refreshing a bit, was wondering in flexbox, when do we need a flex-basis? I was watching a video where we set the flex-basis of the flex items to 100%, what does that mean?
In the video, there are basically 3 items, what isn't recommended is to set it to 33.3333% but setting it up to 100% works and make thing responsive, can someone explain why please.
Now, how does flex-basis differs from a min-width? Isn't it the same thing?
7 Replies
here is the video I was watching:
https://www.youtube.com/watch?v=I4gUvhG7uFU
Kevin Powell
YouTube
The problem with percentages in CSS
We used to have to rely a lot on percentages for our layouts in CSS, but with modern CSS layouts using Flexbox and Grid, they can often be avoided.
✅ What unit to use in what situation: https://youtu.be/N5wpD9Ov_To
✅ How to decide when to use Flexbox or Grid: https://youtu.be/3elGSZSWTbM
⌚ Timestamps
00:00 - Introduction
00:37 - Very sim...
flex-basis sets the initial size of the element. But depending on flex-grow and/or flex-shrink it can very well get bigger/smaller than that. min-width, on the other hand, is the smallest the element is allowed to be. period. grow/shrink be damned.
The reason you'll see flex-basis: 100% has several reasons, but boils down to:
* It's the same line of code regardless of how many items in the flex container
* It sets all of them to the same initial size before shrinking
* It is impossible to represent 1/3 as a decimal number so the size doesn't completely fill the available space
As for when you'd use it…when you need to specify the initial size of an element. If you'd reach for setting a min/max width on an element you'd instead reach for flex-basis in a flex container. Most of the time you do it so the flex children are the same size, as the initial flex size is auto so a flex child with more content would be bigger. Your 3-item div is the perfect example: you want the three elements to be the same size, so you set the same basis for all.yep I see, thanks !
Kevin Powell
YouTube
The thing people get wrong about flex-basis
🎓 Dive even deeper with my 4-hour long flexbox course: https://flexboxsimplified.com
Flex-basis is one of those things that people sort of, kind of, maybe understand what it does, and I often see some bad advice, like “flex-basis” is just width for flexbox, when that can actually lead to some unintended consequences, so in this video I b...
why when we shift from row to column with a flex-basis, the width also increases, is that because of align-items, since the cross axis is now horizontally with a flex direction of column set?
Flex basis only works for main axis
You set flex direction column and now it dictates the initial height instead of width
As for width increasing. Guess what the initial value of align items is?
stretch
yeah I see