
Truong Minh Nguyen
12,574 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,487 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.