Angular flex-layout：fxLayoutGap导致换行后行尾出现多余间隙的解决方法

这个问题我之前也踩过坑——当用fxLayout="row wrap"搭配fxLayoutGap时，换行后的最后一行总会多出不必要的右侧边距，这是因为Flex-Layout默认的fxLayoutGap是通过给每个子元素添加右侧margin来实现间隙的，最后一行的子元素自然会带着这个多余的margin。下面给你两种靠谱的解决办法：

方法1：使用官方推荐的grid模式（最简便） #

Flex-Layout从beta版本开始就支持fxLayoutGap的grid参数，它会自动处理最后一行的边距问题，而且你不用再手动写复杂的calc计算子元素宽度了，直接设置预期的占比就行：

修改后的代码：

<div fxLayout="row wrap" fxLayoutGap="25px grid">
  <mat-form-field fxFlex.xs="50%" fxFlex="33%">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="50%" fxFlex="33%">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="50%" fxFlex="33%">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="50%" fxFlex="33%">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="50%" fxFlex="33%">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="50%" fxFlex="33%">
    <input matInput placeholder="Company">
  </mat-form-field>
</div>

原理：grid模式会给父容器添加负的padding，同时给子元素设置对应的margin，这样既保证了子元素之间的间隙，又不会让最后一行出现多余的边距，完全不用自己算calc，省心很多。

方法2：手动用负margin兼容（不推荐，仅作备选） #

如果因为某些原因不能用grid模式，你可以给父容器添加负margin来抵消最后一行的多余边距，同时子元素的宽度计算要调整：

<div fxLayout="row wrap" fxLayoutGap="25px" style="margin-right: -25px;">
  <mat-form-field fxFlex.xs="calc(50% - 12.5px)" fxFlex="calc(33.333% - 16.666px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <!-- 其他子元素同上 -->
</div>

这里要注意：子元素的calc计算要把间隙的一半算进去（因为每个元素的左右间隙其实是和相邻元素共享的），比如50%宽度的话，间隙是25px，所以要减去25px/2=12.5px；33.333%宽度的话，减去25px/3≈16.666px。这种方法需要手动计算，不如grid模式灵活，所以优先选方法1。

补充说明 #

你使用的依赖版本（@angular/flex-layout@6.0.0-beta.15）已经完全支持grid模式，所以直接用方法1就能完美解决问题，不用升级依赖。

内容的提问来源于stack exchange，提问作者Gerardo Buenrostro González