Angular flex-layout - fxLayoutGap 在包装行的末尾导致烦人的间隙

Question

使用 fxLayoutGap 和换行会在换行的每一行末尾留下恼人的边距。

有办法解决这个问题吗？

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 处的文档状态:

To use fxLayoutGap with a gutter system, simply append the suffix grid to any fxLayoutGap value. This creates a gutter system by applying a margin to the host element and an inverse padding to each child. Other than this change, it works exactly as the default mode. It also takes flex-order and hidden elements into account, and has the same responsive abilities as the default mode.

Please note that unlike the standard gap functionality, fxLayoutGap with the grid keyword applies a padding to each child element to add the gutter, in addition to the margin on the host element.

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