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

Posted by Kristian Woods
Kristian Woods
23,414 Points

Do I understand flex-grow and flex-basis?

Ok, so to summarise -

flex-basis: sets the initial width of flex items.

flex-grow: allows the flex items to take up equal space within the container

if you set the flex-basis value to 200px - when you scale the viewport down, the flex items will stay the same equal width until the flex items width drops below 200px. Then assuming you have flex-wrap on, the flex items will begin to drop to a new line. And because you have flex-grow on, the item that drops to a new line will take up the full width of the container. So essentially, flex-basis says "set me to 200px. As soon as my width is below 200px, I will break to a new line"

by default, the initial value of flex-basis is 0px - meaning it can squish all the way down to 0px and won't break to a new line. This is why its important to set a breakpoint?

However, if you don't declare a flex-basis, the flex-item will span as wide as its content? So, assuming you set the flex-grow to all items to 1 - this to me initially sounds like each item will be given equal width. Yet, if the content varies, this will change how much spacing the element actually takes up.

Is this right?

Thanks