Question

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

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

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>

我正在使用：

@角/芯@ 6.0.0
@角/材料@ 6.0.1
@角/柔性布局@ 6.0.0-beta.15

Answer 1

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

2）为子项添加样式=边距：0 25像素；代替。

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>

但我认为这应该在flex-layout中修复。

Answer 3

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

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

请注意，与标准间隙功能不同，fxLayoutGap   使用grid关键字将填充应用于每个子元素以添加   除了主体元素上的空白之外，还有檐槽。

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

Answer 4

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

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

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

角度flex-layout - fxLayoutGap在包装行的末尾引起恼人的间隙

4 个答案: