垫卡未指定行下方和上方的间隙

Question

我试图在显示垫卡时指定两行之间的一些间隙。但是使用flex后显示不正常

这是HTML文件：-

<div fxLayout="row wrap" fxLayoutAlign="space-around">
  <mat-card class="list-card" *ngFor="let uri of urlData" fxLayoutGap="20px">
    <mat-card-header>
      <mat-card-title>{{uri.title}}</mat-card-title>
      <mat-card-subtitle>3 weeks ago</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg(58 kB)
https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg
" alt="img alt title">
    <mat-card-content>
      <a href="https://medium.....64" class="mat-caption">
        {{uri.documentURL}} </a>
      <!-- <section> -->
      <mat-chip-list>
        <mat-chip>Angular</mat-chip>
      </mat-chip-list>
      <!-- </section> -->
      <p>
        {{uri.description}}
      </p>
    </mat-card-content>
    <mat-card-actions>
      <mat-icon>share_outline</mat-icon>
      <mat-icon>bookmark_outline</mat-icon>
    </mat-card-actions>
  </mat-card>
</div>

这是css:-

.list-card{
    max-width: 260px;
}

Answer 1

.list-card{ max-width: 260px; margin: 10px; }

试试这个代码

Answer 2

有两种选择

1：使用 flexLayoutGap 就像你为 row 间隙所做的那样，但你需要自定义你的结构，如提及 here 对于底部缺口，您还需要使用 flex column。

2：在您的卡上使用 margin-bottom class .list-card

.list-card{
   margin-bottom: 20px;
}

垫卡未指定行下方和上方的间隙

Mat-card is not specifying gap below and above the row

css

angular-flex-layout

angular

mat-card