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

Question

我正在尝试使用角度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使用该参数的条件是什么？

这是我合作过的那个人.

Answer 1

我强烈建议您查看此链接,以获取有关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日

  <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不会增大或缩小
• 增长/收缩是相对于具有auto初始尺寸的其他框

当您设置初始值时,Flex-Layout将实际弹性设置为"1 1 1e-9",这就是增长收缩无效的原因.