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

angular css flexbox angular-flex-layout

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:

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.

CodeHunter