How to move the button to the right side of the container in the material design

Question

I try to get a button to go to the right side of the container, I used several forms, but I can’t get it, somehow style="float: right;"

Perhaps this is not a thing, the design of materials, I have no experience in front-end development.

---

 <md-toolbar color="primary">
    <span><md-icon>mood</md-icon></span>

    <span>Material in Angular 2!</span>

    <button md-icon-button style="float: left;" [md-menu-trigger-for]="menu">
      <md-icon style="float: left;">more_vert</md-icon>
    </button>
  </md-toolbar>

---

<button md-icon-button style="float: right;" [md-menu-trigger-for]="menu">
      <md-icon style="float: right;">more_vert</md-icon>

I would like to move it here. I apologize for my bad english. I hope you understand me.

Answer 1

You are missing a class in the text <span>that allows it to fill in the gap:

See the full example here.

.example-fill-remaining-space {
  // This fills the remaining space, by using flexbox. 
  // Every toolbar row uses a flexbox row layout.
  flex: 1 1 auto;
}

<md-toolbar color="primary">
  <span>Application Title</span>

  <!-- This fills the remaining space of the current row -->
  <span class="example-fill-remaining-space"></span>

  <span>Right Aligned Text</span>
</md-toolbar>

Run codeHide result