Angular flex-layout使用fxLayout="row wrap"时如何添加行垂直间距

单值形式的fxLayoutGap仅会为横向排列的相邻子元素注入水平间距，不会自动为换行产生的行与行之间分配垂直间隙，这是该API的默认行为，可通过以下几种适配现有技术栈的方式解决：

1. 双值gap语法（官方推荐，无额外样式） #

Flex Layout 的fxLayoutGap完全对齐原生CSS gap 的传参规则，支持同时设置垂直行间距、水平列间距，直接修改父容器属性即可，无需调整已有代码：

<div fxLayout="row wrap"
     fxLayoutGap="20px 20px"
     fxLayoutAlign="flex-start">
  <mat-card fxFlex="0 1 calc(33.3% - 20px)"
    class="my-card"
    *ngFor="let item of items">
    ...
  </mat-card>
</div>

• 参数顺序：第一个值为换行后的垂直行间距，第二个值为同一行内的水平元素间距，和当前已符合预期的横向间距值保持一致即可。

2. 组件样式补充（兼容低版本Flex Layout） #

如果项目使用的Flex Layout版本较低，不支持双值gap传参，可以直接给mat-card的自定义类添加垂直方向的下边距，借助Flex Layout自带的边缘留白抵消逻辑，不会出现容器溢出、底部多余空隙的问题：

/* 组件内样式 */
.my-card {
  margin-bottom: 20px;
}

该实现和现有横向间距逻辑完全兼容，不需要修改fxFlex的尺寸计算公式。

3. 响应式垂直间距适配 #

如果需要在不同屏幕尺寸下动态调整行间距大小，可以直接使用Flex Layout自带的断点语法实现响应式gap，无需手写CSS媒体查询：

<div fxLayout="row wrap"
     fxLayoutGap.xs="12px 12px"
     fxLayoutGap.gt-xs="20px 20px"
     fxLayoutAlign="flex-start">

• 上述写法表示：xs尺寸的小屏下，设置12px的行、列间距；大于xs的屏幕尺寸下，恢复为20px的均匀间距。

内容的提问来源于stack exchange，提问作者Nicole Naumann