仅行中的 angular 4 angular-material mat-card答案

【问题标题】：angular 4 angular-material mat-card in only row仅行中的 angular 4 angular-material mat-card
【发布时间】：2018-07-16 16:04:38
【问题描述】：

我只需要在第 2 行垫卡上并排放置.. 我该怎么办？

<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>

我想要这个

【问题讨论】：

标签： angular angular-material

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：