如何在动态创建Mat-Card时将Mat-card-action置于卡片底部

这问题我之前在项目里也碰到过！当用*ngFor动态生成mat-card时，因为每张卡片的内容高度不一致，导致mat-card-actions的位置参差不齐。要解决这个问题，核心是利用CSS Flex布局来控制卡片内部元素的空间分配。

步骤1：修改Mat-Card的布局为Flex #

我们需要把mat-card变成垂直方向的Flex容器，让内容区域自动填充剩余空间，从而把actions推到底部。首先给你的mat-card添加一个自定义类（比如flex-card），然后在组件的CSS里添加以下样式：

/* 让卡片成为垂直Flex容器，占满父容器高度 */
.flex-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 让内容区域占据卡片内的剩余空间 */
.flex-card .mat-card-content {
  flex: 1 1 auto;
  /* 可选：如果内容过长，添加滚动条避免卡片被撑高 */
  overflow-y: auto;
}

步骤2：更新你的HTML代码 #

给循环里的mat-card加上刚才定义的类：

<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
  <mat-card class="flex-card">
    <mat-card-header>
      <mat-card-title>{{s.header}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>{{s.Desc}}</p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button type="submit" color="primary">Submit</button>
    </mat-card-actions>
  </mat-card>
</div>

步骤3：确保父容器高度正确 #

为了让卡片能占满高度，还需要确保父容器（.home-content）的高度设置合理。可以给它也加上Flex布局，保证卡片能撑满可用空间：

.home-content {
  display: flex;
  margin-bottom: 1.5rem; /* 可选：给卡片之间添加间距 */
}

.home-content mat-card {
  width: 100%;
}

原理说明 #

• 把mat-card设为flex-direction: column的Flex容器后，内部元素会垂直排列。
• mat-card-content的flex: 1 1 auto属性会让它自动占据卡片中除了header和actions之外的所有剩余空间，不管内容多少，都会把actions固定在底部。
• 设置height: 100%是为了让所有卡片的高度保持一致，避免因为内容多少导致卡片高度不一。

内容的提问来源于stack exchange，提问作者veeru