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

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

Answer 2

您也可以使用

layout-align="space-between center"

请参阅此示例：https://material.angularjs.org/latest/demo/panel （最后一例）

Answer 3

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

Answer 4

这适用于最新的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>