Mat-Toolbar元素同一行左/中/右对齐实现方案求助

我来帮你搞定这个Mat-Toolbar的对齐需求！你现在的问题是所有链接都挤在同一个容器里，没有明确的区块划分，所以没法实现分别对齐。利用Angular Flex Layout的指令，我们可以轻松把元素分成左、中、右三个区域，完美实现你要的效果。

修改后的完整代码 #

<mat-sidenav-content fxFlexFill>
  <mat-toolbar color="primary">
    <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
      <!-- 左对齐区域 -->
      <div fxLayout="row" fxLayoutGap="8px">
        <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
          <mat-icon>menu</mat-icon>
        </button>
        <a href="#" mat-button fxShow="true" fxHide.lt-md>Align left</a>
        <a href="#" mat-button fxShow="true" fxHide.lt-md>Align left</a>
      </div>

      <!-- 居中区域 -->
      <div fxLayout="row" fxLayoutGap="8px">
        <a href="#" mat-button fxShow="true" fxHide.lt-md>Align center</a>
        <a href="#" mat-button fxShow="true" fxHide.lt-md>Align center</a>
      </div>

      <!-- 右对齐区域 -->
      <div fxLayout="row" fxLayoutGap="8px">
        <a href="#" mat-button fxShow="true" fxHide.lt-md>Align right</a>
        <a href="#" mat-button fxShow="true" fxHide.lt-md>Align right</a>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>
</mat-sidenav-content>

关键修改说明 #

• 工具栏容器设置：给<mat-toolbar-row>添加fxLayoutAlign="space-between center"，这个指令会让容器内的子元素在水平方向上均匀分布，左右两边的元素贴紧工具栏边缘，中间元素自然居中，垂直方向上保持居中对齐。
• 拆分对齐区块：把原来的所有链接拆成三个独立的<div>，分别对应左、中、右三个对齐区域，每个区块内部用fxLayout="row"让按钮横向排列，fxLayoutGap="8px"给按钮之间添加合适的间距，提升视觉体验。
• 菜单按钮归属：把小屏幕显示的菜单按钮放到左对齐区块里，确保在任何屏幕尺寸下，菜单按钮都保持左对齐的位置。

另一种实现方式（可选） #

如果你不想用space-between，也可以给每个区块设置fxFlex="1 1 0%"，让三个区块平分工具栏宽度，然后分别设置各自的对齐方式：

<mat-toolbar-row fxLayout="row">
  <div fxFlex="1 1 0%" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
    <!-- 左对齐内容 -->
  </div>
  <div fxFlex="1 1 0%" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="8px">
    <!-- 居中内容 -->
  </div>
  <div fxFlex="1 1 0%" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
    <!-- 右对齐内容 -->
  </div>
</mat-toolbar-row>

这种方式更灵活，如果你需要调整某个区块的宽度占比，直接修改fxFlex的值即可。

内容的提问来源于stack exchange，提问作者Paul Th.