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

使用angular-flex-layout

<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

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

Angular Material FxLayout - align one button on the left and one on the right

flexbox

angular-material

angular-flex-layout