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

Question

我写的代码是这样的：

    <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>

看起来还不错，只是行与行之间没有space。如何使用 Angular flex-layout 和 material UI 库（此处为垫卡）在行之间添加垂直间隙？

提前致谢！

Answer 1

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

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

Answer 2

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

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

Angular/flex-layout, how to add vertical space between rows when using fxLayout="row wrap"?

css

angular

angular-material

angular-flex-layout