How does the parameter flex-grow work in an fxFlex directive?

Question

I'm trying to use the angular flex-layout, but I have a problem with the directive fxFlex and in particular with the parameter flex-grow.

The doc says :

flex-grow: defines how much a flexbox item should grow (proportional to the others) if there's space available. The flex-grow value overrides the width.

So I thought that with the following code, the second div should have been twice as big as the second one and should have filled the empty space :

<div fxLayout="row">
    <div fxFlex="2 1 30%">[flex="2 1 30%"]</div>
    <div fxFlex="1 1 40%">[flex="1 1 40%"]</div>
</div> 

But it doesn't work as I expected and I can't find out in which conditions the argument flex-grow is used ?

Here is the plunker I worked with.

Answer 1

I'd highly recommend checking out this link for more examples on what to expect from the 'grow shrink initial' in a flex environment.

I forked your plunker for some examples on how to use the grow-shrink initial.

Examples include:

1st box 20% width, and the other two boxes splitting the remaining space in thirds

2nd box is half the size of 3rd

  <div fxFlex="1 1 20%"></div>
  <div fxFlex="1 1 auto"></div>
  <div fxFlex="2 1 auto"></div>

split entire space in tenths

1st 8/10th, 2nd & 3rd 1/10th

  <div fxFlex="8 1 auto"></div>
  <div fxFlex="1 0 auto"></div>
  <div fxFlex="1 0 auto"></div>

split space in thirds

first box twice the size of second

  <div fxFlex="2 0 auto"></div>
  <div fxFlex="1 0 auto"></div>

I know the documentation says otherwise, but I've been working with this quite a bit and found:

• If you set an initial size the flex-layout will not grow or shrink
• the grow/shrink is relative to the other boxes with auto initial size

Flex-Layout sets the actual flex to "1 1 1e-9" when you set an initial value, which is why the grow shrink has no effect.