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

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