mat-tab-group - 将项目与中心、左右对齐答案

【问题标题】：mat-tab-group - Aligns items to the center, right and leftmat-tab-group - 将项目与中心、左右对齐
【发布时间】：2020-06-14 14:25:57
【问题描述】：

是否可以使用 mat-tab-group 对齐中心、右侧和左侧的按钮？我正在使用垫标签。怎样才能把左边名字的元素放在左边，中间名字的元素放在中间，右边名字右边的元素呢？

我尝试使用此mat-align-tabs="center" 来居中某些元素，但即使这样也不起作用。

我使用了以下，但它只在一种情况下有效......我无法对齐三个部分（中心、右侧和左侧）中的项目。

.mat-tab-labels {
    display: flex;
    justify-content: center !important;
}

谁能帮我把元素放在左边、中间和右边，并使所有按钮都适合屏幕？

DEMO

代码

<mat-sidenav-container fxFlexFill>
    <mat-sidenav-content fxFlexFill>
        <mat-tab-group mat-align-tabs="center">
            <mat-tab label="Left">Content 1</mat-tab>
            <mat-tab label="Left">Content 2</mat-tab>
            <mat-tab label="Center">Content 3</mat-tab>
            <mat-tab label="Center">Content 4</mat-tab>
            <mat-tab label="Center">Content 5</mat-tab>
            <mat-tab label="Center">Content 6</mat-tab>
            <mat-tab label="Right">Content 7</mat-tab>
            <mat-tab label="Right">Content 8</mat-tab>
            <mat-tab label="Right">Content 9</mat-tab>
            <mat-tab label="Right">Content 10</mat-tab>
            <mat-tab label="Right">Content 11</mat-tab>
        </mat-tab-group>
    </mat-sidenav-content>
</mat-sidenav-container>

示例

【问题讨论】：

标签： angular typescript angular-material material-design

【解决方案1】：

试试这样的：

<mat-sidenav-container fxFlexFill>
    <mat-sidenav-content fxFlexFill>
        <mat-tab-group mat-align-tabs="center">
            <mat-tab label="Left">Content 1</mat-tab>
            <mat-tab label="Left">Content 2</mat-tab>
            <mat-tab class="center"label="Center">
        <div class="center">Content 3 </div>
      </mat-tab>
            <mat-tab label="Center">
          <div class="center">Content 4 </div>
      </mat-tab>
            <mat-tab label="Right">
         <div class="right">Content 5</div>
      </mat-tab>
            <mat-tab label="Right">
         <div class="right">Content 6 </div>
      </mat-tab>
        </mat-tab-group>
    </mat-sidenav-content>
</mat-sidenav-container>

scss:

.center {
  @at-root div#{&} { 
    text-align : center;
  }
}
.left {
  @at-root div#{&} { 
    text-align : left;
  }
}
.right {
  @at-root div#{&} { 
    text-align : right;
  }
}

直播：https://stackblitz.com/edit/angular-kjcfx2?file=src%2Fstyles.scss

【讨论】：