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

Qian Chen
Qian Chen
33,579 Points
Posted by Qian Chen
Qian Chen
33,579 Points

flex-grow: 3 doesn't seems to be reflected?

The css of flex-grow:

.item {
  flex-grow: 1;
}

.item-3 {
  flex-grow: 3;
}

when show in the browser, it seems the item 3 does not really take up 3 time width as other items take.

Sehui Park
Sehui Park
2,518 Points

I think 'flex-grow:3' means 3 times than original size. So if you remove .item's flex-grow property and keep .item3 property, it shows 3 times width.

Qian Chen
Qian Chen
33,579 Points
Qian Chen
Qian Chen
33,579 Points

When I remove .item { flex-grow: 1; }, the item 3 stretches and takes up all the room while others have fixed width. It's still not 3x as wide as others.

4 Answers

Jose Esplana
Jose Esplana
12,503 Points
Jose Esplana
Jose Esplana
12,503 Points

Hi! Brendan Whiting are you able to find a job after completing your Front-end Dev degree? How long did it took you to finish it?

Thanks!

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

The article flex-grow is weird. Or is it? that Guil linked in the teacher's notes explains this issue quite well.

To sum up what is happening, flex-grow is calculating the free space on the main axis within the flex container and then distributing it to the items based on their flex-grow value, adding to their existing widths (or heights if the direction is column/vertical).

So if your browser window is too narrow, then there is very little 'free space' left to distribute, so the difference between .item-3 and the rest isn't so large.

Aaron Coursolle
Aaron Coursolle
18,014 Points
Aaron Coursolle
Aaron Coursolle
18,014 Points

My two-cents:

I'm using Chrome and @Jonathan Grieve's code only works when the browser is at full-screen.

When I gradually scale down, the width of item-1 scales down until it is slightly larger than the rest of the list items. Then items drop down to a new line and then they actually wider than item-1. While item-1 is always wider than the items that share its line, it is never double-width ever again.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

I'm not sure if you've managed to fix this by now, but adding this code

/* ================================= 
  Flexbox
==================================== */

.container {
    display: flex;
    flex-wrap: wrap;
}

.item  {
  flex-grow: 1;
}

.item-1 {
  flex-grow: 3;
}

in flexbox.css of your workspace seems to do the trick. The first item is 3 times as large as any of the other.

Qian Chen
Qian Chen
33,579 Points
Qian Chen
Qian Chen
33,579 Points

I don't think the first item is 3 times as large as other items. However, it seems the empty space in the first item is 3 times as large as the empty space of other items. Is it actually talking about the free space in an item, instead of the item itself?