使用Angular Material，是否可以在同一行中将一个按钮对齐到左侧，将另一个按钮对齐到右侧？

Question

根据Angular Material关于对齐的文档，layout-align属性包含两个单词。第一个单词表示子元素在布局方向上的对齐方式，第二个单词表示子元素在垂直于布局方向上的对齐方式。

我使用这个属性创建了下面图片中的按钮区域： 代码如下：

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
  <md-button class="md-primary">Submit</md-button>
  <md-button class="md-warn">Cancel</md-button>
  <md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>

然而，我希望 提交 按钮靠左对齐，而其他所有按钮都靠右对齐。在 Angular Material 中有没有正确的方法可以实现这一点，还是我只能创建自己的样式？

- Tiago

Answer 1

你可以通过 div 和 layout-align 来实现这一点，这是代码：

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
  <div layout="row" layout-align="start center" flex>
    <md-button class="md-primary">Submit</md-button>
    <span flex></span>
  </div>
  <md-button class="md-warn">Cancel</md-button>
  <md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>

还需要一个能正常工作的Plunker。

- Sajeetharan

---

如果它被包含在 md-toolbar 中，似乎无法正常工作。 - Muhammad bin Yusrat

您的 Plunker 中的按钮是相互堆叠的。问题要求“一个左侧，一个右侧”。我不明白这有什么帮助。 - Enrico

我也这样认为，但如果您进入全屏预览，它是正确的。这是因为“layout-sm”设置为“column”，而“layout”设置为“row”。基本上，如果屏幕不够大，它将显示为列，否则将显示为行。 - Andrew Pye

Answer 2

您可以使用

标签。

layout-align="space-between center"

看这个例子：https://material.angularjs.org/latest/demo/panel（最后一个例子）。

- marcoooo

---

仅适用于AngularJS（v1）材料，不适用于Angular（v2+）。 - Prasanth Jaya

Answer 3

""space-between center"在Angular V5和angular/flex-layout中可用。您需要将其用作：fxLayoutAlign =“space-between center”。"

- jean ECARD

---

我认为这是目前最好的答案。它有效且简短。 - Janne Harju

Answer 4

关于工具栏的文档展示了一个简单的解决方案：

<mat-toolbar>
  <button mat-icon-button><mat-icon>menu</mat-icon></button>     <-- left
  <span class="example-spacer"></                  <-- space in the middle
  <button mat-icon-button><mat-icon>favorite</mat-icon></button> <-- right
  <button mat-icon-button><mat-icon>share</mat-icon></button>    <-- right
</mat-toolbar>

这将在左侧放置“汉堡菜单”图标，在右侧放置心形（“收藏”）和分享图标。关键是这个小美女：

 <span class="example-spacer"></span>

使用以下CSS代码：

.example-spacer {
  flex: 1 1 auto;
}

第一个参数是最大空间，第二个是最小空间，第三个是理想空间。 auto 表示“填满空间”。

flex: 0 1 auto 和 flex: none 表示零空间，即心形和分享图标向右对齐。

你甚至可以将一个图标放在左边，一个放在中间，一个放在右边：

<mat-toolbar>
  <button mat-icon-button><mat-icon>menu</mat-icon></button>     <-- left
  <span class="example-spacer"></span>                           <-- space
  <button mat-icon-button><mat-icon>favorite</mat-icon></button> <-- middle
  <span class="example-spacer"></span>                          <-- space
  <button mat-icon-button><mat-icon>share</mat-icon></button>    <-- right
</mat-toolbar>

- Thomas David Kehoe

Answer 5

这适用于最新的Angular。

如果您想将多个按钮左对齐或右对齐，可以使用div将它们分组。

例如，当您将“上一页”和“下一页”按钮放置在左侧，将关闭按钮放置在右侧时，

<section fxLayout fxLayoutAlign="space-between center">
   <div>
      <button mat-button>Prev</button>
      <button mat-button>Nex</button>
    </div>
    <button mat-button cdkFocusInitial mat-dialog-close>Close</button>
</section>

- brian