0

I have 4 buttons in same row, I wanna align 2 buttons left and 2 buttons right.

My code:

html

<mat-card class="popup-actions">
  <button mat-button tabindex="-1" class="round-button warn-btn btn" (click)="closeDialog()">
    <mat-icon>
      close
    </mat-icon>
  </button>
  <button mat-button tabindex="-1" class="round-button done-btn btn" (click)="confirm()">
    <mat-icon>
      done
    </mat-icon>
  </button>
  <button mat-button tabindex="-1" class="round-button btn2" (click)="save()">
    <mat-icon>
      save
    </mat-icon>
  </button>
  <button mat-button tabindex="-1" class="round-button btn2" (click)="refresh()">
    <mat-icon>
      refresh
    </mat-icon>
  </button>
</mat-card>

scss

.popup-actions {
  display: flex;
  background-color: blueviolet;
  .btn {
    margin-right: 5px;
    width: auto;
  }

  .btn2 {
    align-self: flex-end;
  }
}

But I cannot achieve it. Any suggestion is appreciated

franco phong
  • 2,219
  • 3
  • 26
  • 43

1 Answers1

0

Add the following CSS:

.done-btn {
    margin-right: auto;
 }

Read this article to understand effects of margin on flex items. https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/

Vishal Biswas
  • 401
  • 2
  • 8