在 mat-grid-tile Angular 上显示 flex答案

【问题标题】：display flex on mat-grid-tile Angular在 mat-grid-tile Angular 上显示 flex
【发布时间】：2020-07-19 18:08:43
【问题描述】：

我正在尝试使用 display: flex; 使 mat-grid-tile 内的卡片间隔更大但是，卡片粘在一起，它们之间没有空间。我应该怎么做才能让它们看起来更间隔？

HTML

<mat-grid-tile [colspan]="3" [rowspan]="2" class="productTile">

    <mat-card *ngFor="let product of products" class="productCard">
      <mat-card-header>
        <ngx-avatar mat-card-avatar class="my-avatar" value={{product.authorInitials}} *ngIf="product.authorProfile == ''" class="avatar-header" size="40"> </ngx-avatar>
        <ngx-avatar mat-card-avatar class="my-avatar" src={{product.authorProfile}} *ngIf="product.authorProfile != ''" class="avatar-header" size="40"> </ngx-avatar>
        <mat-card-title>{{product.title}}</mat-card-title>
        <mat-card-subtitle>{{product.author}}</mat-card-subtitle>
        <button mat-icon-button matTooltip="Edit Post"><mat-icon class="toggle-icon">edit</mat-icon></button>
        <button mat-icon-button matTooltip="Delete Post" (click)="deletePost(product.postID)"><mat-icon class="toggle-icon">delete</mat-icon></button>
      </mat-card-header>
      <img mat-card-image [src]="product.imageLinks ? product.imageLinks[0] : null" alt="Photo" class="cardImage">
      <mat-card-content>
        <p>
          {{product.description}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </mat-grid-tile>

SCSS

.productTile{
  display: flex;
  justify-content: space-around;
}

【问题讨论】：

标签： html angular sass angular-material

【解决方案1】：

请看这个答案： How to set row spacing in Angular Material's Grid?

您可以使用属性gutterSize

【讨论】：