Angular 17：如何将mat-tab-group的4个标签分左右排列？

开发者阿泽

2026-6-19

实现Angular 17 Mat-Tab-Group标签左右分布的方法

直接用margin搞不定是因为Mat-Tab-Group的标签栏默认是flex布局，每个标签项默认带flex-grow: 1，会自动拉伸占满空间，导致margin失效。下面是靠谱的实现方式：

步骤1：给Mat-Tab-Group加自定义类

在模板里给目标组件加上自定义类，避免影响其他tab组件：

<mat-tab-group class="split-tabs">
  <mat-tab label="标签1">内容1</mat-tab>
  <mat-tab label="标签2">内容2</mat-tab>
  <mat-tab label="标签3">内容3</mat-tab>
  <mat-tab label="标签4">内容4</mat-tab>
</mat-tab-group>

步骤2：编写CSS样式

根据Angular的视图封装规则，你可以选择两种方式写样式：

方式一：组件内样式（需加`::ng-deep`）

在组件的.component.css里添加：

::ng-deep .split-tabs .mat-tab-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

::ng-deep .split-tabs .mat-tab-label {
  /* 取消标签自动拉伸，避免占满空间 */
  flex-grow: 0;
  flex-shrink: 0;
  /* 可选：给标签加左右间距，避免挤在一起 */
  margin: 0 8px;
}

/* 用CSS伪元素和order属性把标签分成左右两组 */
::ng-deep .split-tabs .mat-tab-labels::before {
  content: '';
  order: 1;
}

::ng-deep .split-tabs .mat-tab-label:nth-child(3),
::ng-deep .split-tabs .mat-tab-label:nth-child(4) {
  order: 2;
}

方式二：全局样式（无需`::ng-deep`）

直接把样式写在styles.css或styles.scss里，去掉::ng-deep即可：

.split-tabs .mat-tab-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.split-tabs .mat-tab-label {
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0 8px;
}

.split-tabs .mat-tab-labels::before {
  content: '';
  order: 1;
}

.split-tabs .mat-tab-label:nth-child(3),
.split-tabs .mat-tab-label:nth-child(4) {
  order: 2;
}