Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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