角度平铺布局（使用Flex的间隙）

Question

我一直在使用Flex，我几乎可以通过良好的图块获取所需的结果。但我假设每一列都将允许图块连续堆叠（无行）。也许我将错误的方法结合在一起..以及想法或帮助将不胜感激。

<div fxLayout="row wrap" fxLayout="none start">
  <div
    *ngFor="let topic of topics"
    fxFlex="33"
    fxFlex.md="33"
    fxFlex.sm="50"
    fxFlex.xs="100"
    fxLayout="column"
    style="padding: 5px;">

    <mat-card>
      <mat-card-header>
        <mat-card-title class="card-title" routerLink="/topic/{{topic._id}}/comments">{{topic.title}}</mat-card-title>

        <mat-card-subtitle>
          {{topic.createdBy.name}} • {{topic.createdAt|date:'short'}}
        </mat-card-subtitle>
      </mat-card-header>

      <mat-card-content class="card-content">
        <p>
          {{topic.description}}
        </p>
      </mat-card-content>

      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>FOLLOW</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

我在不使用flex的情况下也得到了相似的结果，但是在底部对齐

<div style="width: 100%;">
  <div
    *ngFor="let topic of topics"

    style="width: 32% !important; padding: 5px; display: inline-block">