Angular/flex-layout，使用 fxLayout="row wrap" 时如何在行之间添加垂直空间？答案

【问题标题】：Angular/flex-layout, how to add vertical space between rows when using fxLayout="row wrap"?Angular/flex-layout，使用 fxLayout="row wrap" 时如何在行之间添加垂直空间？
【发布时间】：2021-05-31 08:31:05
【问题描述】：

我写了这样的代码：

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

看起来还不错，只是行之间没有空格。如何使用 Angular flex-layout 和材质 UI 库（此处为 mat-card）在行之间添加垂直间隙？

提前致谢！

【问题讨论】：

标签： css angular angular-material angular-flex-layout

【解决方案1】：

使用网格模式： FlexLayout Grid Mode fxLayoutGap="10px grid"

【讨论】：

【解决方案2】：

我没有找到任何开箱即用的 fx- 指令。最终得到了这个可行的解决方案，但可能不是最优雅的解决方案。在这个 css 文件中，只需添加：

.my-card {
  ...
  margin-top: 10px;
  margin-bottom: 10px;
  ...
}

【讨论】：