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

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>

它看起來還不錯，只是行之間沒有空格。 如何使用 Angular flex-layout 和材質 UI 庫（此處為 mat-card）在行之間添加垂直間隙？

提前致謝！

Answer 1

我沒有找到任何開箱即用的 fx- 指令。 最終得到了這個可行的解決方案，但可能不是最優雅的解決方案。 在這個 css 文件中，只需添加：

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