参数 flex-grow 在 fxFlex 指令中如何工作?

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

我正在尝试使用 angular flex-layout,但指令 fxFlex 有问题,尤其是参数 flex-grow.

文档说:

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.

所以我认为使用下面的代码,第二个 div 应该是第二个的两倍大并且应该填充空的 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> 

但它没有像我预期的那样工作,我无法找出在哪些条件下使用参数 flex-grow

Here 是我一起工作的 plunker。

我强烈建议您查看 this link 以获取有关在 flex 环境中对 'grow shrink initial' 的期望的更多示例。

forked your plunker一些关于如何使用增长-收缩初始的例子。

示例包括:

第一个框 20% 宽度,其他两个框将剩余的 space 一分为三

第二个盒子是第三个盒子的一半

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

将整个 space 分成十分之一

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>

一分为二space

第一个框是第二个框的两倍

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

我知道文档另有说明,但我已经对此进行了大量研究并发现:

  • 如果您设置初始大小,则 flex-layout 将不会增大或缩小
  • grow/shrink 相对于具有 auto 初始大小
  • 的其他盒子

当您设置初始值时,Flex-Layout 将实际的 flex 设置为“1 1 1e-9”,这就是增长收缩无效的原因。