CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

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
186,980 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

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
186,980 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!

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

Steven Parker
Steven Parker
186,980 Points

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

What playground? Can u link me to it

Steven Parker
Steven Parker
186,980 Points

I included the link in my original answer above.

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