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

Nicholas Wallen
Nicholas Wallen
12,278 Points
Posted by Nicholas Wallen
Nicholas Wallen
12,278 Points

Would there ever be any reason why if you were targeting all the items & giving them anything more than 1 for flex-grow?

For instance, in this specific video, he targeted .item which includes multiple items. We know that setting the flex-grow property to 1 made all the items equal in width, but would there ever be a point of using 2 or 3 or more when targeting ALL of the items?

1 Answer

Shay Paustovsky
Shay Paustovsky
969 Points
Shay Paustovsky
Shay Paustovsky
969 Points

Hi Nicholas,

That is an EXCELLENT question!

The answer is NO, by default the { flex-grow: } property is set to 0 means the flex-items take as much space as they need. anything beyond that will divide equally the space in the flex-container between flex-items. So it doesn't matter if you will use any other value like : 2, 3, 10, 20. as long as it's above and different then the default value the space will be divided equally.

Values over 1 when targeting single items really comes in handy, when you want a flex-item to be bigger than it's counterparts.

Hope this helps!!

Shay