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 trial

CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Truong Minh Nguyen
Truong Minh Nguyen
12,587 Points
Posted by Truong Minh Nguyen
Truong Minh Nguyen
12,587 Points

flex-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
Eric Butler
33,512 Points

Flex-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.