角度弯曲布局-fxLayoutGap在包装的行的末端导致令人讨厌的间隙

Question

使用fxLayoutGap和wrap在包装的每一行的末尾都留下了令人讨厌的空白。

有没有办法解决这个问题？

https://stackblitz.com/edit/angular-fxlayoutgap-calc-mralnz?file=app%2Fapp.component.html

<div fxLayout="row wrap" fxLayoutGap="25px">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
</div>

我在用：

• @ angular / core @ 6.0.0
• @ angular / material @ 6.0.1
• @ angular / flex-layout @ 6.0.0-beta.15

Answer 1

对于寻找此问题答案的任何人，您需要将网格添加到 fxLayoutGap。https://github.com/angular/flex-layout/wiki/fxLayoutGap-API 上的文档指出：

要将 fxLayoutGap 与装订线系统一起使用，只需将后缀网格附加到任何 fxLayoutGap 值。这通过对宿主元素应用边距和对每个子元素应用反向填充来创建一个装订线系统。除了此更改之外，它的工作方式与默认模式完全相同。它还考虑了 flex-order 和隐藏元素，并具有与默认模式相同的响应能力。

请注意，与标准间隙功能不同，带有 grid 关键字的 fxLayoutGap 将填充应用于每个子元素以添加装订线，以及宿主元素上的边距。

最后一点与子元素上的网格如何与父元素上的 fxLayoutGap 发生冲突有关，因此请注意父元素可能会覆盖子元素布局。在两者之间添加一个额外的 div 将解决该问题。

Answer 2

您可以通过在末尾添加一个虚拟组件来破解它，该虚拟组件不会显示，但会通过 flex-layout 进行布局，以便“最后一个”表单字段也获得额外的边距，然后调整父容器边距以抵消附加右边距：

<div fxLayout="row wrap" fxLayoutGap="25px" style="margin-right:-25px;">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <span class="cdk-visually-hidden"></span>
</div>

但我认为这是应该在弹性布局中修复的问题。