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

Question

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?

Answer 1

The documentation for Toolbar shows a simple solution:

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

This puts the "hamburger menu" icon on the left and the heart ("favorite") and share icons on the right. The key is this little beauty:

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

with this CSS:

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

The first parameter is a maximum amount of space, the second is the minimum, and the third is the ideal. auto means "fill up the space".

flex: 0 1 auto and flex: none make zero space, i.e., the heart and share icons go right.

You can even put one icon on the left, one in the middle, and one on the right:

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

Answer 2

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.

Answer 3

You can also use

layout-align="space-between center"

See this exemple : https://material.angularjs.org/latest/demo/panel (Last exemple)

Answer 4

"space-between center" works with Angular V5 and angular/flex-layout. You will have to use it as: fxLayoutAlign = "space-between center".