FxFlex 计算集 min-height，而原始值集 max-height

Question

<div fxFill fxLayout="column">
    <div fxFlex="8" fxLayout="column"> Fixed Header </div>
    <div fxFlex="20" fxLayout="row" [fxHide]="isShow"> Colapsable Header </div>
    <div fxFlex="72" fxLayout="column"> Page content </div>
</div>

这样，如果我隐藏了header，20%的页面还是空白，导致包含页面内容的div仍然只占72%

但是如果我使用 with calc <div fxFlex="calc(92% - 20%)">，这个相应的 div 会根据上面的 div 是隐藏还是显示来修改她的身高，所以即使 div 折叠起来也永远不会有空白 space..

为什么会这样？ calc(92% - 20%) 始终为 72%，那么为什么它的行为会有所不同？

编辑问题标题后的更多上下文：

在观察生成的 Html 之后，我收集到了

fxFlex="72" 设置一个 max-height="72%"
fxFlex="calc(92%-20%)" 集 min-height="72%"

Answer 1

简短的回答是因为您正在使用 calc。

长答案是 fxLayout 库正在检查您使用的是具体值（例如，只是一个数字）还是 calc 函数，并根据此决定 min或 max 应应用高度

    // Fix for issues 277, 534, and 728
    if (basis !== '0%' && basis !== '0px' && basis !== '0.000000001px' && basis !== 'auto') {
      css[min] = isFixed || (isValue && grow) ? basis : null;
      css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
    }

您可以在 here

上找到来源的片段

如代码段所示，在输入具有 calc 值的情况下，max-height 将不会应用。

现在我们已经清除了 calc 案例，让我们深入研究 fxFlex="72" 案例。

fxFlex directive/input 接受最多 3 个 space 分隔的参数，如果像您的情况那样只提供一个输入 fxFlex="{grow} {shrink}" {base} fxFlex="72" ，这将以与 fxFlex="1 1 72"

相同的方式进行评估

所以现在当我们进入 if 语句时，我们将首先检查 css[min] 的结果，在前半部分我们看到 isFixed 属性（这将是false，我们可以跳过这个，因为它与案例无关）。在第二个中，我们混合了 (isValue && grow)，因此 grow 属性将是真实的，因为它将采用默认值 1。这里更有趣的是 isValue 属性，它代表了以下逻辑（同样在源代码中看到）

   let isValue = (hasCalc || hasUnits);

我们已经讨论过 hasCalc 在这种情况下将是 false （因为我们有以下输入 fxFlex="72" ），关于 hasUnits 这是一个属性检查在 basis 值之后 % 旁边是否有任何单位（单位如 %、px、rem...），因此在这种情况下 hasUnits 也将是false.

总而言之，我们的 css[min] 值等于 null。

继续下一行，我们再次看到 isFixed 值等于 false 并且在表达式的后半部分我们看到以下 (!usingCalc && shrink) ，这次没有计算函数所以 !usingCalc 将是 true，因为我们有 shrink 的默认值 1，整个表达式将被计算为 true 并且它将将 basis 值应用为 css[max].

如果您不这样做，就不会使用 calc 我建议您执行以下操作

  <div fxFill fxFlex="100" fxLayout="column">
    <div style="background-color: palegreen;" fxFlex="8" fxLayout="column"> Fixed Header <button (click)="toggle()">Toggle</button> </div>
    <div style="background-color: rgb(179, 24, 174);" fxFlex="20" fxLayout="row" [fxHide]="show"> Colapsable Header </div>
    <div style="background-color: orange;" fxFlex="1 0 72" fxLayout="column"> Page content </div>
  </div>

在这里，我将 fxFlex="72" 的默认 shrink 值设置为 1，而不是 0 [=14] =] 将跳过我们现在正在查看的最小-最大检查并填充可用的 space.

FxFlex 计算集 min-height，而原始值集 max-height

FxFlex Calc sets min-height, while raw value sets max-height

flexbox

angular-flex-layout

angular