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 Growing Flex Items

Posted by Victor Mercier
Victor Mercier
14,667 Points

Not sure to understand flex grow

I know that if we give all items the same flex grow value, they will all take the same space. But, if I set for example .item-3 a flex-grow value of 2, I am getting mixed up. I do not understand when the teacher said for EVERY BIT OF SPACE the other flex items get on one line, .item3 will always get twice as much of that space.

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

If you have set a flex-grow value for all items, such as 1 then they are going to grow into the remaining space of the flex container equally, thus giving us equal width columns. If you then set an individual item a higher flex-grow value, such as 3, that means that that item will always take up three times as much of the flex-container space than the other items. It will grow into that remaining space at a faster pace as well. When you shrink the browser window, and try to enlarge it, watch how the item with the higher flex-grow value starts to grow at a higher speed than the other items that have a flex-grow of 1.