CSS CSS Flexbox Layout Flexbox Properties Growing Flex Items

Victor Mercier
Victor Mercier
4,675 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
Jamie Reardon
Front End Web Development Techdegree Student 12,522 Points

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.