Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialTruong Minh Nguyen
12,587 Pointsflex-basis: 0
flex-basis
specifies the initial main size of a flex
item. So when flex-basis
is set to 0, are the flex items' widths 0 pixels? Or their width is their content's width?
1 Answer
Eric Butler
33,512 PointsFlex-basis overrules any specified CSS width
value, so if you set flex-basis
to 0, it doesn't fall back to the CSS "width" value. However, the only way it'll actually be 0px wide is if there's absolutely no content or padding inside it (which would be uncommon in real-world use). Otherwise, it'll expand to accommodate whatever content/padding is in it, just due to basic, old-school box-model stuff.
The other factor that can totally overrule this is if you're also setting flex-grow
. Flex-basis is VERY commonly used with flex-grow
and flex-shrink
-- so much so that you usually see them in shorthand as:
flex: 1 0 auto;
That means flex-grow: 1; flex-shrink: 0; flex-basis: auto;
If you had 2 flex items and gave them both a flex-grow
property above 0, and set the flex-basis
of one item to 0 and the other to auto
, then both elements will widen evenly and will each fill half of however much room there is to fill. In that case, the flex-grow
property overrules the flex-basis
property.
It's kinda crazy, but I hope that makes sense. Maybe the best takeaway is, there's probably never a reason to set flex-basis to 0, unless it really shouldn't ever have any width. And if that's the case, you might be better off simply hiding or removing the element altogether.