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 trialGoldSpec Digital
4,185 PointsFlexbox 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
231,236 PointsIt 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
Courses Plus Student 8,099 PointsSaud Tauqeer
Courses Plus Student 8,099 Pointshttps://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
231,236 PointsSteven Parker
231,236 PointsI 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
Courses Plus Student 8,099 PointsSaud Tauqeer
Courses Plus Student 8,099 PointsI still dont quite get it maybe an example would help..
Steven Parker
231,236 PointsSteven Parker
231,236 PointsThat's where that playground tool can be very useful.
Saud Tauqeer
Courses Plus Student 8,099 PointsSaud Tauqeer
Courses Plus Student 8,099 PointsWhat playground? Can u link me to it
Steven Parker
231,236 PointsSteven Parker
231,236 PointsI included the link in my original answer above.
Saud Tauqeer
Courses Plus Student 8,099 PointsSaud Tauqeer
Courses Plus Student 8,099 Pointsokay 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