Angular中如何实现mat-grid-tile内容分别左对齐和右对齐

该需求完全可以实现，以下是两种常用实现方案：

方案1：使用mat-grid-tile内置对齐属性（推荐，适配Angular Material v14及以上版本） #

Angular Material高版本为mat-grid-tile组件提供了原生的水平对齐参数justify，无需额外编写自定义样式，直接调整HTML代码即可：

<mat-grid-list cols="2" rowHeight="50px">
  <mat-grid-tile justify="start">
    <app-filter></app-filter>
  </mat-grid-tile>
  <mat-grid-tile justify="end">
    <button mat-raised-button color="primary">
      <mat-icon>document_scanner</mat-icon>
      <span>Export as CSV</span>
    </button>
  </mat-grid-tile>
</mat-grid-list>

参数说明：

• justify="start"：当前tile内容沿水平方向左对齐
• justify="end"：当前tile内容沿水平方向右对齐

默认的垂直居中对齐逻辑不会受影响，完全符合需求。

方案2：自定义CSS样式（兼容所有Angular Material版本） #

如果你使用的是低版本Angular Material，不支持内置justify属性，可以通过覆写默认flex布局样式实现：

1. 首先修改HTML，为两个tile添加自定义类名：

<mat-grid-list cols="2" rowHeight="50px">
  <mat-grid-tile class="left-align-tile">
    <app-filter></app-filter>
  </mat-grid-tile>
  <mat-grid-tile class="right-align-tile">
    <button mat-raised-button color="primary">
      <mat-icon>document_scanner</mat-icon>
      <span>Export as CSV</span>
    </button>
  </mat-grid-tile>
</mat-grid-list>

2. 添加对应CSS样式：
   如果是写在全局样式文件styles.css中，直接添加以下代码即可：

.left-align-tile {
  justify-content: flex-start !important;
  padding-left: 16px; /* 可选，避免内容贴边 */
}

.right-align-tile {
  justify-content: flex-end !important;
  padding-right: 16px; /* 可选，避免内容贴边 */
}

如果是写在当前组件的样式文件中，需要添加::ng-deep前缀解除样式封装：

::ng-deep .left-align-tile {
  justify-content: flex-start !important;
  padding-left: 16px;
}

::ng-deep .right-align-tile {
  justify-content: flex-end !important;
  padding-right: 16px;
}

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