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

Posted by Kristian Woods
Kristian Woods
23,414 Points

Understanding flex-basis and flex-grow

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

Joyce Takagi
Joyce Takagi
2,744 Points
Joyce Takagi
Joyce Takagi
2,744 Points

I just tested your idea using the video's sample code. When the flex-box is set to 0, the content determines the width of the items inside the container, which will vary, but not fill up the full width of the container if the content doesn't fill up the available space. As soon as you set flex-box to 1 you can see that the items fill up the space equally or you can set the flex-box to the ratio of your choosing. If you reduce your viewport size, then you will see the items resize down to 0px if you haven't set the flex-basis width.

The content wasn't flush against the edges of the blue background color, so maybe someone else can speak to why that is happening. Padding or margin, perhaps?