How to align buttons to left in navbar - angular-material

Question

Trying to align some menu buttons to left with Angular Material
like on the screenshoot
<div>
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<a mat-button class="menu" routerLink="/">
<span>Just a menu</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</mat-toolbar>
</div>
How can I do this in proper way and still have responsive site?

Answer 1

You can use flexbox like this:
Add a class to your div and add container to specify "right and left block"
.container {
display: flex;
justify-content: space-between;
}
<div fxShow="true" fxHide.lt-md="true" class="container">
<div>
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>
The 3 buttons will be on the left and Login, Logon on the right

Answer 2

I'm using this library: https://www.npmjs.com/package/#angular/flex-layout for easier alignment
After installing the library, use this snippet in your code
<div fxShow="true" fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<a mat-button routerLink="/component1">Button1</a>
<a mat-button routerLink="/component2">Button2</a>
<a mat-button routerLink="/component3">Button3</a>
</div>
<div>
<a mat-button routerLink="/login">Login</a>
<a mat-button routerLink="/logout">Logout</a>
</div>
</div>