Angular flex-layout - fxLayoutGap 导致包裹行末尾出现恼人的间隙

使用fxLayoutGap 和wrap 在被换行的每一行的末尾留下令人讨厌的边距。

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

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

<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>

我在用：

• @角/[电子邮件受保护] /cdn-cgi/l/email-protection
• @角/[电子邮件受保护] /cdn-cgi/l/email-protection
• @角/[电子邮件受保护] /cdn-cgi/l/email-protection

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

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

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

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