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.
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.
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.
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
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
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.
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.
) below!
) to up-vote the contribution!
