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.
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:
auto
initial sizeFlex-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.