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

但它没有像我预期的那样工作，我无法找出使用参数class MyEntity { private $hidden; public function getHidden() { return $this->hidden; } public function setHidden($value) { $this->hidden = value; } // the rest of your code etc }的条件？

Here是我合作过的人。

Answer 1

我强烈建议您查看this link，了解更多有关“缩小缩小”的提示的示例＆＃39;在灵活的环境中。

I forked your plunker有关如何使用grow-shrink initial的一些示例。

示例包括：

第一个方框宽度为20％，另外两个方框将剩余空间分成三分之一

第二个方框是第三个方框的一半

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

以十分之一分割整个空间

1st 8 / 10th，2nd＆amp; 3月1日

  <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将实际弹性设置为＆＃34; 1 1 1e-9＆＃34;设置初始值时，这就是增长收缩无效的原因。

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

1 个答案: