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

Question

我正在尝试使用 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。

Answer 1

我强烈建议您查看 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”，这就是增长收缩无效的原因。

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

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

angular

css

flexbox

angular-flex-layout