FAQ: Flexbox - flex-grow

This community-built FAQ covers the “flex-grow” exercise from the lesson “Flexbox”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise flex-grow

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

under flex-grow, why do flex items display side by side when the container is set to flex? i thought flex meant children divs would remain block level elements.

3 Likes

Quote from Codecademy: A div with the declaration display: flex; will remain block level — no other elements will appear on the same line as it.
However, it will change the behavior of its child elements. Child elements will not begin on new lines. In the exercises that follow, we will cover how the flex display property impacts the positioning of child elements.

3 Likes

If I assign flex-grow 1 to only one item and do nothing to anything else in the container is there anything that is supposed to happen?

1 Like

Hey, any idea why my macbook has coped fine with everything on the web devs course so far but in chrome the tab (only this one, all other tabs are fine) crashes after the .bottom.side and .bottom.center are given flex values and I resize the window?

Everything else has worked perfectly til now and the browser tab consistently crashes just on this one step.

Cheers,
Laura

1 Like

The default value of flex=grow is 0 so any positive value added to an item will affect a change

Same on my windows computer

Should I be seeing any differences after applying the css rules?

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/lessons/learn-flexbox-l/exercises/flex-grow

They all behave the same?

1 Like

When setting only one flex item’s flex-grow property, it doesn’t actually matter what its value is. So if you set it to 1, 10 or even 100, it will simply scale up with its flex container while the other flex items won’t! This is because the value of the flex-grow property represents how much space the flex item will take up in proportion to the other flex items. So if we set a flex item’s flex-grow property to 2, it means it will take up twice as much space as the other flex items. But because the other flex items don’t actually have a set flex-grow property (meaning they won’t scale up to fit their parent container) there is nothing to scale in proportion to. Of course, the flex item with a set flex-grow property will take the size of the other flex items into consideration

1 Like

i do agree, i don’t know why, but i see any different at all :frowning:
can someone help me what’s the different?

Try to change the window size of the rightmost screen. It doesn’t look different because presumably the container size is not large enough for the items’ size to change.

I had a little bit of a tough time wrapping my head around flexbox, stumbled across this game and it really helped me to fully understand:

Don’t know if it’ll come in handy to anyone else but thought I’d share it nonetheless. Even if you 100% understand the concept it’s a really nicely developed little game - it’s pretty ace

Happy coding :slight_smile:

5 Likes

Hi, does anybody know why we don’t assign .middle.side anything?

Hi,
Hard for me to understand most of the Flexbox.
Could anyone please help me with this:
div id=“top”
div class=“top side”
Why second class has two names- top and side?
In the “style” -
.top.side {
flex-grow: 1;
flex-shrink: 2;
“top” must come from the id "top, “side” from the class “side”.
And again, what is class “top” uses for?
I am confused.

Hi! The class top is used to style all the top children (boxes). Remember classes can be used on more than one time so this is an easy way to style all the blue boxes at once. Also, one html item can have multiple classes so div class=“top side” means it has two classes “top” class and “side” class.

The containers are assigned a value of display: flex in their ids, eg #top. So the container top has 3 child elements.

Hope that helps! Reply to this if you have any more questions.

1 Like

The exercise is meant to show us three different situations so that we can better understand how flex-grow works.
The top class demonstrates the situation where all the items have the same flex-grow value.
The bottom class shows the situation where all items have the flex-grow values but the values of all the items aren’t the same.
The middle class shows the situation where an item has a flex-grow value but other items haven’t been given this value. This is why the items with ‘middle side’ classes haven’t been assigned any flex-grow value. When we enlarge the browser (by clicking the arrows in the top right corner of the screen), we can see that the middle center item does grow while the middle side items don’t grow.

Why don’t the flex items use up all the space? If they are supposed to absorb free space with flex-grow then why is there still so much space between them? Even if you take away the margin property from the .top, .middle and .bottom selectors, they still don’t fill up all the space

You ARE resizing your browser window, but the browser you need to resize is sort of nested inside your main browser. Resize it from the other side. Grab the line between your code and the mini-browser with the boxes and stretch and shrink that

In the .top, .middle, .bottom { } selector, use // to comment out both the border and margin properties. Now, you should see that the items don’t have any space between them.

There is still space above and below the divs. If they have flex-grow properties, why don’t they fill up the remaining space?