html - 如何将三个图标对齐到页面标题的右侧

Question

我现在的情况:

相关代码:

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

我只想让 3 个图标彼此靠近并右对齐。如果我将 fx-layout-align 更改为 fx-layout-align-xs，我几乎得到了我想要的:

但是向左而不是向右...

我尝试了很多 CSS 配置，但没有一个对我有用，有什么简单的方法可以实现吗？非常感谢。

Answer 1

如果您使用此插件:https://github.com/angular/flex-layout#api-overview

我建议:

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