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

Question

根据Angular Material's documentation on alignment：

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>

但是，我希望 Submit 按钮左对齐，而所有其他按钮右对齐。是否有使用 Angular Material 的正确方法，还是我只需要创建自己的样式？

Answer 1

这适用于最新的 Angular。

如果你想将多个按钮左对齐或右对齐，你可以简单地用 div 组合按钮。

例如，当您将 Prev 和 Next 按钮放在左侧，将关闭按钮放在右侧时，

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

Answer 2

"space-between center" 适用于 Angular V5 和 angular/flex-layout。 您必须将其用作：fxLayoutAlign = "space-between center"。

Answer 3

你也可以使用

layout-align="space-between center"

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

Answer 4

您可以在 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。