Mat-Toolbar 对齐项目（左，中，右）

Posted 2023-03-13

【中文标题】Mat-Toolbar 对齐项目（左，中，右）

【英文标题】：Mat-Toolbar Align Items (left, center and right)

【发布时间】：2020-06-12 18:12:46

【问题描述】：

我开发了一个工具栏，但我无法将元素对齐在同一行，左、中和右。

有人知道如何对齐这些元素吗？

我注意到名为 Align left 的元素左对齐，align center 对齐中心，align right 右对齐。

谢谢

Demo

代码

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

【参考方案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>

【讨论】：

完美，正是我需要的，非常感谢

@PaulTh.Yeaah 超级棒！ :D

【参考方案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>