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

但是,我希望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.