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

Question

我正在尝试使用 angular flex-layout，但我对指令fxFlex有问题，尤其是在 parameter问题上flex-grow。

医生说：

flex-grow：如果有可用空间，定义弹性盒项目应该增长多少（与其他项目成比例）。flex-grow 值覆盖宽度。

所以我认为使用下面的代码，第二个div应该是第二个的两倍并且应该填满空白空间：

<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使用了这个参数？

这是我一起工作的笨蛋。

score 10 · Accepted Answer

我强烈建议您查看此链接，以获取更多示例，了解在 flex 环境中从“grow shrink initial”可以得到什么。

我为你的 plunker提供了一些关于如何使用 grow-shrink 首字母的例子。

示例包括：

第一个盒子 20% 宽度，另外两个盒子将剩余空间分成三份

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

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

将整个空间分成十分之一

1 日 8 月 10 日、2 日和 3 日 1 月 10 日

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

将空间分成三份

第一个盒子是第二个的两倍

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

我知道文档另有说明，但我一直在研究这个问题并发现：

Flex-Layout 在设置初始值时将实际的 flex 设置为“1 1 1e-9”，这就是增长收缩没有效果的原因。

1 回答 1