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 Flexbox Properties Smarter Layouts with flex-basis and flex

GoldSpec Digital
GoldSpec Digital
4,185 Points
Posted by GoldSpec Digital
GoldSpec Digital
4,185 Points

Flexbox basis...

So,

I think I get this but I just want to make sure.

Flexbox basis is used to determine the initial minimum width of a flexbox item, before it distributes the space.

But, if the item goes below the min width specified, then.... it gets bigger?

Okay so I don't really get it...

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It can be confusing, particularly when you consider that it interacts with the other flex factors.

Perhaps the MDN page and this page from CSS Tricks might help, or this Complete Guide to Flexbox.

Also, a bit of experimentation might be more useful than more descriptions.
Here's a cute playground tool: Flexy Boxes

Saud Tauqeer
Saud Tauqeer
Courses Plus Student 8,099 Points

https://teamtreehouse.com/community/why-no-flexbasis-or-0-flexbasis-still-break-the-line-when-narrowing-the-browser

steven take a look at this i tried it too and its working differently on chrome. flex: 1; is redistributing contents however in the flex shorthand the flex-basis value is 0. so it should squeeze upto 0px or whatever yeah? so is the course outdated? and is there a fix for this?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I see some CSS settings in that article but no complete examples, so I'm not sure what they are referring to.

But remember when using the shorthand, "flex-basis" defaults to 0 but you can't set it to 0 unless you include units, otherwise it will think you are specifying "flex-grow" or "flex-shrink". On the other hand, if you don't use the shorthand, "flex-basis" defaults to "auto" instead of 0. So it's easy to get confused!

Saud Tauqeer
Saud Tauqeer
Courses Plus Student 8,099 Points

I still dont quite get it maybe an example would help..

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

That's where that playground tool can be very useful.

Saud Tauqeer
Saud Tauqeer
Courses Plus Student 8,099 Points

What playground? Can u link me to it

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I included the link in my original answer above.

Saud Tauqeer
Saud Tauqeer
Courses Plus Student 8,099 Points

okay so i think i understand the concept now. when using the shorthand you give flex:1 which is actually : flex-grow:1; flex-basis :0% and flex-shrink:0; but when you give flex-grow:1; you use only the flex grow it automatically assumes the value for flex-basis which is auto thats why there wont be expected result or same as using shorthand vs longhand