Angular flex-layout - fxLayoutGap 在包裹行的末尾导致恼人的间隙答案

【问题标题】：Angular flex-layout - fxLayoutGap causes annoying gap at end of wrapped rowsAngular flex-layout - fxLayoutGap 在包裹行的末尾导致恼人的间隙
【发布时间】：2018-10-23 15:13:38
【问题描述】：

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

【问题讨论】：

标签： angular angular-material angular-flex-layout

【解决方案1】：

根据您需要支持的浏览器，您可以使用新的 css gap 属性，该属性适用于 flex 布局。它会自动解决这样的问题，因为这是它的目的。

Support is good 从 2020 年 7 月起在 Chrome + Edge 和 Firefox 中更早。它现在在 Safari 中受支持，但仅从 iOS 14.5 开始。

如果您现在或以后能够使用它，它肯定会简单得多。

【讨论】：

【解决方案2】：

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

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

请注意，与标准间隙功能不同，fxLayoutGap 使用 grid 关键字对每个要添加的子元素应用填充排水沟，除了宿主元素的边距。

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

【讨论】：

请注意，在容器内直接使用<mat-card> 时，请务必将卡片包裹在容器内，例如<div>，以防止 <mat-card> 出现意外的布局问题（由于填充和边距）。

【解决方案3】：

1) 移除 fxLayoutGap，因为它为子项添加了 margin-right。

2) 给子项添加样式 = margin: 0 25px;而是。

【讨论】：

【解决方案4】：

您可以通过在末尾添加一个虚拟组件来破解它，该组件不显示但由 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>

但我认为这是应该在 flex-layout 中解决的问题。

【讨论】：