mat-tab-group - выравнивает элементы по центру, справа и слева

Question

Можно ли выровнять центральную, правую и левую кнопки, используя 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>

Пример

Answer 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>

с css:

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

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