如何将三个图标与页面标题的右侧对齐

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>