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

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配置，但都没有成功，有没有简单的方法可以实现这一点？非常感谢。

- Idos

---

为此创建JSFiddle。 - priya_singh

如果你想使用 justify-content: flex-start CSS 属性，请参考此处获取更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。另外，我的建议是不要在 HTML 中定义它，而是在 CSS 中定义！ - Joel Harkes

你能否尝试添加以下代码：fx-layout-align="start"，就像这里所示：https://github.com/angular/flex-layout#api-overview - Joel Harkes

@JoelHarkes 产生了我展示的第二个输出（正确但在左侧而不是右侧内部）。 - Idos

那么，如果你想使用 end 而不是 start 呢？如果你想要按钮的顺序不同，你应该改变：flex-direction: row-reverse。 - Joel Harkes

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>

- Joel Harkes

---

这部分是有效的。它正确地调整了图标，就像我想要的那样。但它也会将标题的所有内容向右移动。我只需要移动图标。尝试创建另一个div，但它也会搞乱内容，并创建2个“级别”... - Idos

移动了哪些“其他内容”？它也是 flexbox 的一部分吗？仅更改这些 CSS 属性不应该改变 flexbox 外部的布局。否则，设置固定大小可能会起作用？ - Joel Harkes

标志和“club” - <img class="logo" src="./logo.png"/>club 在 span 中。 - Idos

通过指定 <span class="page-headline" fx-flex fx-layout-align="start">，我成功解决了它。谢谢！ - Idos

啊，我明白了，用另一个弹性盒子包裹/分离它，并使用 justify-content: space-between。 - Joel Harkes

Answer 2

只需在您的CSS中添加以下代码：

<style>
.main_menu_button1,.main_menu_button2,.main_menu_button3
{
    float:right;
}
</style>

- Anil Saini

---

它已经浮动了，正如您在第一张图片中所看到的那样，并且通过fx-flex符号，我相信他使用了CSS弹性盒布局。 - Joel Harkes

@JoelHarkes - 如果问题仍然存在，为按钮提供固定宽度可能会解决这个问题。 - Anil Saini