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

问题描述

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

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

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

<mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)"><input matInput placeholder="姓名"></mat-form-field><mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)"><input matInput placeholder="职业"></mat-form-field><mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)"><input matInput placeholder="公司"></mat-form-field><mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)"><input matInput placeholder="姓名"></mat-form-field><mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)"><input matInput placeholder="职业"></mat-form-field><mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)"><input matInput placeholder="公司"></mat-form-field>

我正在使用:

• @angular/[email protected]
• @angular/[email protected]
• @angular/[email protected]

解决方案

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

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

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

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

Using fxLayoutGap and wrap leaves an annoying margin at the end of each row that is wrapped.

Is there a way to fix this?

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>

I am using:

• @angular/[email protected]
• @angular/[email protected]
• @angular/[email protected]

解决方案

For anyone looking for the answer to this problem, you need to add grid to fxLayoutGap. The documentation at https://github.com/angular/flex-layout/wiki/fxLayoutGap-API states:

That last point is in relation to how the grid on the child elements can clash with the fxLayoutGap on the parent element so be aware that the parent may override the child layout. Adding an extra div between the two will solve that issue.

这篇关于Angular flex-layout - fxLayoutGap 在包装行的末尾导致恼人的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！