Geek Answers Handbook

Understanding Flexible Growth

I have 3 divs, and if I give flex: 0.5 first two divs, the last div should go to the next line if I gave flex-wrap: wrap . Please correct if I am wrong.

Below is my html / css:

 .parent { display: flex; height: 100px; background-color: red; flex-wrap: wrap; } .child-1 { background-color: green; flex: 0.5; } .child-2 { background-color: yellow; flex: 0.5; } .child-3 { background-color: pink; } 
 <div class="parent"> <div class="child-1">LOREN IPSUM LOREN IPSUM</div> <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div> <div class="child-3">LOREN IPSUMLOREN IPSUM</div> </div>

Please check out the JSFiddle .

Thanks in advance.

+7
html css flexbox css3 flex-grow
source share
1 answer

The flex-grow property is used to distribute free space in the container between flex elements.

It is not intended to directly or accurately size flexible elements.

From spec :

flex-grow ... determines how much the flex-grow item will grow relative to the other flex items in the flex container when positive free space is allocated.

Consequently, flex-grow will not force elements to be wrapped. Here is your example with flex-grow: 1000 : demo

To determine the length of a flex element, use width , height or flex-basis .

flex-grow: 0.5 explanation flex-grow: 0.5

When you apply flex:0.5 , you use the shorthand property of flex to say the following:

  • flex-grow: 0.5
  • flex-shrink: 1
  • flex-basis: 0

The flex-grow component is a proportion. In this case, it tells the flex items to consume half the available space in the container relative to the flex-grow coefficient of its siblings.

So, for example, if the container was width: 600px and the total width of the three divs was 450px, this would leave 150px in free space ( demo ).

If each element had flex-grow: 1 , then each element will consume 50px of additional space, and each element will calculate width: 200px ( demo ).

But in your code, two elements have flex-grow: 0.5 , and the last element has flex-grow: 0 , so here it breaks:

  • div # 1 will get 75px (half the available space)
  • div # 2 will get 75px (half the available space)
  • div # 3 will get 0 (because its flex-grow is 0)

These are the calculated values:

  • div # 1 = width: 225px
  • div # 2 = width: 225px
  • div # 3 = width: 150px

demonstration

 .parent { display: flex; flex-wrap: wrap; height: 100px; background-color: red; width: 600px; } .parent > div { flex-basis: 150px; } .child-1 { flex: 0.5; background-color: green; } .child-2 { flex: 0.5; background-color: yellow; } .child-3 { background-color: pink; } 
 <div class="parent"> <div class="child-1">LOREN IPSUM LOREN IPSUM</div> <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div> <div class="child-3"> LOREN IPSUMLOREN IPSUM</div> </div>

NOTE. The truth is that divs # 1 and # 2 have the same flex-grow coefficient, and div # 3 has a coefficient of 0, the value does not matter. You can use any number to replace 0.5. As long as it is the same in both divs, the elements will be calculated up to 225px, because the proportions will be the same.

Additional Information:

  • flex-grow does not match flex items as expected
  • How to get flexbox to enable padding in calculations?
  • What are the differences between flex and width?
+8
source share

More articles:


All Articles