Flex-grow confusion


why is step 2’s center so big if it assigned a flex-grow of 1, like the other classes?


" The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others.

kindly pass on the code, flex-grow code. to fill an available space… does flex-grow: 1 do that? and a flex-grow: 2 does it twice as much as a flex-grow 1?

see what i mean?


With the flex-grow property the content grows to fill its container, you can think the 1 and 2 as this: If you want to fill 100 px with 3 items then you could:

  • Tell them to grow 33px each (1 on each class)
  • Tell the center one to be 50px and the other ones 25px (.side {flex-grow: 1;} .center {flex-grow: 2;})
    The reason why the center is bigger on step 2 is because the side ones haven’t got a flex-grow property, so the center will grow to fill more space.

If the box is too small for the items to grow then they won’t, and if it is too small for their size they will shrink (this can also be set with the flex-shrink property