角度材质中的切换按钮组中的按钮对齐

Question

我正在尝试制作一个内部很少带有材料按钮的材料工具栏。我想将左侧的第一个按钮对齐，并在工具栏的右侧放置三个按钮。我正在尝试通过CSS来实现这一点，但无法实现。

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <mat-button-toggle-group #group="matButtonToggleGroup">
        <mat-button-toggle value="left" aria-label="Text align left">
          <mat-icon>format_align_left</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="center" aria-label="Text align center">
          <mat-icon>format_align_center</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="right" aria-label="Text align right">
          <mat-icon>format_align_right</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="justify" aria-label="Text align justify">
          <mat-icon>format_align_justify</mat-icon>
        </mat-button-toggle>
      </mat-button-toggle-group>
</mat-toolbar-row>
</mat-toolbar>

<div class="example-selected-value">Selected value: {{group.value}}</div>

Answer 1

您需要调整一些flexbox样式以使其起作用。当前实现使用downvotes，而需要display: inline-flex;。紧接着，第二个切换键（display: flex;）需要推到右侧。可以使用.mat-button-toggle:nth-child(2)来实现。

SCSS代码

margin-left: auto

已编译的CSS代码

.mat-button-toggle-group.mat-button-toggle-group {
  display: flex;

  .mat-button-toggle:nth-child(2) {
    margin-left: auto;
  }
}

结果

有关示例，请参见this StackBlitz。请注意，需要通过在CSS中再次添加相同的类并使其更具体来覆盖默认的切换组。