带有垫卡和 mat-card-actions/mat-card-footer 的垫网格列表

Question

我有以下代码，在 angular 6 和 material 设计中：

<div class="grid-container">

  <h1 class="mat-h1">Candidatos</h1>

  <mat-grid-list cols="5" gutterSize="20px" class="list-candidatos">

    <mat-grid-tile *ngFor="let candidato of candidatos">

      <mat-card class="candidato-card">

        <mat-card-header>
          <mat-card-title>{{candidato.nome}}</mat-card-title>
        </mat-card-header>

        <mat-card-content>
          &nbsp;
        </mat-card-content>

        <mat-card-actions>
          <button mat-button>Edit</button>
        </mat-card-actions>

      </mat-card>

    </mat-grid-tile>

  </mat-grid-list>

</div>

还有 css

.list-candidatos {
  width: 93%;
  margin: 20px auto;
  margin-top: 60px;
}

.candidato-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

但无论我在 css 中进行什么更改，我都无法使垫卡动作或垫卡页脚保留在卡片底部。 所以：

1. 结构是否正确？
2. 如果正确，如何将 mat-card-actions/mat-card-footer 放在 mat-grid-tile 的底部？

Answer 1

尝试将 mat-card（带或不带页脚、图像或页眉）或使用 mat-card 和 fxFlex 值的自定义组件放入 div 或fxLayout="row wrap 这样的任何元素：

<div fxLayout="row wrap">
    <mat-card *ngFor="let obj of objects" fxFlex="50">{{obj}}</mat-card>
</div>

这个问题类似于

Answer 2

在 CSS 试试这个，它会解决页脚问题

.mat-card{
  display:flex;
  flex-direction: column;
}

.mat-card-header {
  flex-shrink: 0;
}

.mat-card-content{
  flex-grow: 1;
  overflow: auto;
}