Мат-панель инструментов выравнивания предметов (слева, по центру и справа)

Question

Я разработал панель инструментов, но не могу выровнять элементы по одной линии, слева, по центру и справа.

Кто-нибудь знает, как я могу выровнять эти элементы?

Я заметил, что элементы с названием «Выровнять по левому краю» выровнены по левому краю, центр выравнивания по центру по центру, а выравнивание по правому краю - по правому краю.

Спасибо

Демонстрация

Код

  <mat-sidenav-content fxFlexFill>  
      <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>

      <div fxShow="true" fxHide.lt-md>
        <a href="#" mat-button>Align left</a>
        <a href="#" mat-button>Align left</a>
        <a href="#" mat-button>Align center</a>
        <a href="#" mat-button>Align center</a>
        <a href="#" mat-button>Align right</a>
        <a href="#" mat-button>Align right</a>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>

Answer 1

Вы ищете что-то подобное?

<div fxShow="true" fxHide.lt-md fxFlex fxLayout>
  <!-- The following menu items will be hidden on both SM and XS screen sizes -->
  <div fxFlex>
     <a href="#" mat-button>Align left</a>
     <a href="#" mat-button>Align left</a>
  </div>
  <div fxFlex fxLayoutAlign="center center">
     <a href="#" mat-button>Align center</a>
     <a href="#" mat-button>Align center</a>
  </div>
  <div fxFlex fxLayoutAlign="flex-end center">
     <a href="#" mat-button>Align right</a>
     <a href="#" mat-button>Align right</a>
  </div>
</div>

Answer 2

css. Это расширяется и занимает максимально доступное пространство.

.flexExpand {
    flex: 1 1 auto;
}

в вашем шаблоне используйте утилиту flexExpand для разделения элементов

<mat-toolbar>
<mat-toolbar-row>
 <div >
      <a mat-button [routerLink]="'/accounts'"> Accounts </a>
      <a mat-button [routerLink]="'/create-account'"> Create Account </a>
    </div>
    <span class="flexExpand"></span>
    <div >
      <a mat-button [routerLink]="'/logout'"> Logout </a>
    </div>
    <mat-toolbar-row>
</mat-toolbar>