Angular Material：为mat-tab-group添加标签与右对齐按钮间的分隔栏

方法1：自定义标签头模板（纯CSS Flex） #

直接替换默认的mat-tab-header，用Flex布局实现标签左对齐、按钮右对齐的效果，完全掌控布局结构：

<mat-tab-group>
  <!-- 自定义标签头 -->
  <mat-tab-header>
    <div class="tab-header-wrapper">
      <!-- 左侧标签列表 -->
      <div class="tab-list">
        <mat-tab-label>标签页1</mat-tab-label>
        <mat-tab-label>标签页2</mat-tab-label>
        <mat-tab-label>标签页3</mat-tab-label>
      </div>
      <!-- 右侧操作按钮 -->
      <div class="header-actions">
        <button mat-stroked-button>按钮A</button>
        <button mat-raised-button color="primary">按钮B</button>
      </div>
    </div>
  </mat-tab-header>

  <!-- 标签页内容 -->
  <mat-tab>
    <p>标签页1内容</p>
  </mat-tab>
  <mat-tab>
    <p>标签页2内容</p>
  </mat-tab>
  <mat-tab>
    <p>标签页3内容</p>
  </mat-tab>
</mat-tab-group>

对应的CSS样式：

.tab-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 16px; /* 可选，和默认标签头内边距对齐 */
}

.tab-list {
  display: flex;
  gap: 4px; /* 调整标签间距，匹配Material Design默认样式 */
}

.header-actions {
  display: flex;
  gap: 8px;
}

方法2：使用Angular Flex-Layout指令 #

如果你的项目已经引入了@angular/flex-layout，可以直接用Flex布局指令快速实现，无需手写CSS：

<mat-tab-group>
  <mat-tab-header>
    <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
      <div fxLayout="row" fxLayoutGap="4px">
        <mat-tab-label>标签页1</mat-tab-label>
        <mat-tab-label>标签页2</mat-tab-label>
        <mat-tab-label>标签页3</mat-tab-label>
      </div>
      <div fxLayout="row" fxLayoutGap="8px">
        <button mat-stroked-button>按钮A</button>
        <button mat-raised-button color="primary">按钮B</button>
      </div>
    </div>
  </mat-tab-header>

  <!-- 标签页内容 -->
  <mat-tab>
    <p>标签页1内容</p>
  </mat-tab>
  <mat-tab>
    <p>标签页2内容</p>
  </mat-tab>
  <mat-tab>
    <p>标签页3内容</p>
  </mat-tab>
</mat-tab-group>

为什么之前的fxFlex没生效？ #

默认的mat-tab-header内部有固定的DOM结构（比如mat-tab-list容器），它的默认样式会限制外部Flex指令的作用范围。自定义标签头模板可以绕过这些默认结构，让你完全控制布局逻辑。

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