Using Angular Material, is it possible to align one button to the left and another to the right, in the same row?

Issue

According to Angular Material's documentation on alignment:

The layout-align attribute takes two words. The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.

I used this to create the button section that you can see on the picture below:

With the following code:

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

However, I wanted the Submit button to be left-aligned, and all the others right-aligned. Is there a correct way of doing this with Angular Material or will I just have to create my own styles?

Solution

You can do so with the help of a div and layout-align , here is the code:

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

And a working Plunker.

Answered By - Sajeetharan