CSS flex-grow Property

CS Discoveries Unit and Lesson Discussion
1

In line 44 of this solution code they use a flex-grow value of 2. I have noticed that values of 1, 5, & 10 all work similarly and I am not sure why. One explanation I’ve come up with is that flex-grow: 1 is commonly used when we want all elements to be the same size, and together they should fill the container. So is that why we don’t use a value of 1 here?
And what about values larger than 2?

Thanks,

John

2

This is a great observation. The flex-grow property is a neat one, but can only be understood relative to what’s around it. I found that playing with the w3schools.com examples really helped me to visualize how it works. Let me know what you think.

3

Thank you, @edavis . That is a helpful tool.

I modified the example code to add a “ruler” with 10 blocks that are each 50px wide directly under the block of colored bars in the W3Schools example. This helps me “measure” the size of the blocks when I change the flex:grow value for the second color bar. I am not sure I fully understand it, but I am getting a better idea.

Here’s the code if anyone wants to try it:

<!DOCTYPE html>
<html>
<head>
<style>
#main, #ruler {
  width: 500px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 2;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

#ruler div:nth-of-type(1) {flex-grow: 1;}
#ruler div:nth-of-type(2) {flex-grow: 1;}
#ruler div:nth-of-type(3) {flex-grow: 1;}
#ruler div:nth-of-type(4) {flex-grow: 1;}
#ruler div:nth-of-type(5) {flex-grow: 1;}
#ruler div:nth-of-type(6) {flex-grow: 1;}
#ruler div:nth-of-type(7) {flex-grow: 1;}
#ruler div:nth-of-type(8) {flex-grow: 1;}
#ruler div:nth-of-type(9) {flex-grow: 1;}
#ruler div:nth-of-type(10) {flex-grow: 1;}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
<div id="ruler">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

John