How to align three icons to the right of the page headline

Question

I have the current situation:

Relevant code:

<md-toolbar color="primary" class="main-toolbar">
  <div fx-layout="row" fx-flex fx-layout-align="space-between">
    <span  class="page-headline">
      <img class="logo" src="./logo.png"/>club
    </span>
    <button md-icon-button class="main_menu_button1" (click)="dinnerClicked()">
      <md-icon>local_pizza</md-icon>
    </button>
    <button md-icon-button class="main_menu_button2" (click)="notificationsClicked()">
      <md-icon>notifications</md-icon>
    </button>
    <button md-icon-button class="main_menu_button3" (click)="eventsClicked()">
      <md-icon>event_note</md-icon>
    </button>
  </div>
</md-toolbar>

I just want the 3 icons to be adjacent closely to each other and align to the right. If I change fx-layout-align to fx-layout-align-xs, I get almost what I want:

But to the left instead of to the right...

I have tried many CSS configurations but none worked for me, is there any easy way to acheive this? Many thanks.

Answer 1

If you are using this plugin: https://github.com/angular/flex-layout#api-overview

i suggest:

<md-toolbar color="primary" class="main-toolbar">
  <div fx-layout="row" fx-flex fx-layout-align="end" >
    ...
  </div>
</md-toolbar>