Angular Material FxLayout - 左对齐一个按钮，右对齐一个按钮

Question

编辑：

是否存在 FxLayout 指令将关闭按钮移动到左侧并将其他按钮保留在右侧？或者我怎样才能通过CSS达到相同的结果？

<div class="actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
    <button mat-raised-button color="secondary" [mat-dialog-close]="true" >Close</button>
    <button mat-raised-button color="primary" (click)="previous()" >Previous</button>
    <button mat-raised-button color="primary" (click)="next()" >Next</button>
</div>

Answer 1

使用角度弯曲布局

<div fxLayout="row" fxLayoutAlign="space-between center">
  <button> Other button</button>
  <div>
    <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
    <button mat-raised-button color="primary" (click)="save()">
        Save</button>
  </div>
</div>

使用CSS

.space-between-container {
  border: 1px solid #808080;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.flex-container {
  border: 1px solid #808080;
  display: flex;
}

.spacer {
  flex: 1 1 0;
}

<div class="space-between-container">
  <button> Other button</button>
  <div>
    <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
    <button mat-raised-button color="primary" (click)="save()">
        Save</button>
  </div>
</div>
<div class="flex-container">
  <button> Other button</button>
  <span class="spacer"></span>
  <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
  <button mat-raised-button color="primary" (click)="save()">
        Save</button>
</div>

基本上它使用CSS属性justify-content: space-between