角度弯曲布局-fxLayoutGap在包装行的末尾产生令人讨厌的间隙 [英] Angular flex-layout - fxLayoutGap causes annoying gap at end of wrapped rows

问题描述

使用fxLayoutGap和wrap在被包装的每一行的末尾留下一个令人讨厌的空白.

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>

我正在使用:

• @ angular/core @ 6.0.0
• @ angular/material @ 6.0.1
• @ angular/flex-layout @ 6.0.0-beta.15

推荐答案

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

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:

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

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.

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

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将解决该问题.

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.

这篇关于角度弯曲布局-fxLayoutGap在包装行的末尾产生令人讨厌的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！