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

【问题标题】：How does the parameter flex-grow work in an fxFlex directive?参数 flex-grow 在 fxFlex 指令中如何工作？
【发布时间】：2017-09-21 15:24:24
【问题描述】：

我正在尝试使用角度 flex-layout，但指令 fxFlex 存在问题，尤其是参数 flex-grow。

文档说：

flex-grow：定义如果有可用空间，flexbox 项目应该增长多少（与其他项目成比例）。 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在哪些条件下使用？

Here 是我合作过的笨蛋。

【问题讨论】：

【解决方案1】：

我强烈建议您查看this link，以获取更多关于 flex 环境中“增长收缩初始值”的期望的示例。

我forked your plunker 提供了一些关于如何使用grow-shrink 首字母的示例。

示例包括：

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

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

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

将整个空间分成十分之一

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>

将空间分成三份

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

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

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

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

【讨论】：