Angular Material中mat-card-header内按钮右对齐实现问题

方案1：修改mat-card-header布局属性（最通用） #

mat-card-header 默认已启用flex布局，只需要添加对齐属性即可：

<mat-card-header style="justify-content: space-between; align-items: center;">
  <mat-card-title>
   {{rosterDetails.dutyDate}} ({{rosterDetails.dutyTime}})
  </mat-card-title>
  <button mat-icon-button (click)="goBack()">
    <mat-icon>arrow_back</mat-icon>
 </button>
</mat-card-header>

• justify-content: space-between 会让头部内的子元素分别靠左右两端排布
• align-items: center 保证标题和按钮垂直居中对齐，避免错位
  如果不想用内联样式，自定义CSS类绑定到mat-card-header上效果相同。

方案2：仅给按钮添加右推属性（适配多子元素场景） #

如果头部左侧有多个元素，不需要调整头部整体布局，直接给按钮加左边自动边距即可：

<mat-card-header>
  <mat-card-title>
   {{rosterDetails.dutyDate}} ({{rosterDetails.dutyTime}})
  </mat-card-title>
  <button mat-icon-button (click)="goBack()" style="margin-left: auto;">
    <mat-icon>arrow_back</mat-icon>
 </button>
</mat-card-header>

flex布局下，子元素设置margin-left: auto会自动占据左侧剩余空间，将按钮推到最右侧。

方案3：使用Angular Flex Layout指令（符合Material开发规范） #

如果项目引入了Angular Flex Layout模块，直接用内置指令即可，无需额外写CSS：

<mat-card-header fxLayout="row" fxLayoutAlign="space-between center">
  <mat-card-title>
   {{rosterDetails.dutyDate}} ({{rosterDetails.dutyTime}})
  </mat-card-title>
  <button mat-icon-button (click)="goBack()">
    <mat-icon>arrow_back</mat-icon>
 </button>
</mat-card-header>

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