css - 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 和 Material UI 库(此处为 mat-card)在行之间添加垂直间隙？

提前致谢!

Answer 1

使用网格模式: FlexLayout Grid ModefxLayoutGap="10px 网格"