仅在一行中有角度的4个角材料垫卡

Question

我只需要并排放置在第二排席卡中。我该怎么办？

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>     
  <mat-card-content>        
  </mat-card-content>     
</mat-card>

我想要这个

Answer 1

您可以将style添加到div：

<div style="display:flex; flex-direction: row;">
   <mat-card class="example-card">
      ...
   </mat-card>
   <mat-card class="example-card">
      ...
   </mat-card>
</div>

Answer 2

您可以为此使用弹性布局。 https://alligator.io/angular/flex-layout/