FxFlex Calc 设置最小高度，而原始值设置最大高度

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>

像这样，如果我隐藏标题，页面的20％保持空白，导致包含页面内容的div仍然只占据72％

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

为什么它会这样工作？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;
    }

您可以在此处找到源代码片段

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

现在我们已经查清了这个calc案子，让我们深入了解这个fxFlex="72"案子。

指令fxFlex/输入最多接受 3 个空格分隔的参数，如果仅fxFlex="{grow} {shrink}" {base}提供一个输入（如您的情况）fxFlex="72"，则将以与fxFlex="1 1 72"

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

   let isValue = (hasCalc || hasUnits);

我们已经讨论了这种情况下的情况hasCalc（false因为我们有以下输入fxFlex="72"），这是一个属性，用于检查值后面hasUnits是否有任何单位（单位如％，px，rem ...），所以在这种情况也将是。%basishasUnitsfalse

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

继续下一行，我们再次看到isFixed值等于false，在表达式的后半部分我们看到以下内容(!usingCalc && shrink)，这次没有计算函数，所以!usingCalc将是true，并且因为我们有默认值1for shrink，所以整个表达式将是评估为true并将应用该basis值 as 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"不是默认值，这样做将跳过我们现在正在查看的最小-最大检查，并将填充可用空间。shrink10fxLayout