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

user_1820422 0
Viewed 3233

EDITED:

Does it exist a FxLayout directive to move the close button on the left and to leave others buttons on the right? alternately how can i achieve the same result via 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>
angular-flex-layout flexbox angular-material
1 Answers

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

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

Basically its using the CSS property justify-content: space-between

naveen_174470
Related