How can I align text in an angular md-button stretched file?

Question

Without too much redoing my own CSS, is there an attribute or configuration that I can use to align the text in the md-button which is slightly stretched to fit the menu, for example?

This is my current view.

<md-sidenav md-is-locked-open="$mdMedia('gt-md')" layout="column"> <md-toolbar> <h1 class="md-toolbar-tools"> <a ng-href="/" layout="row" href="/"> <div class="docs-logotype">Material Design</div> </a> </h1> </md-toolbar> <md-content flex role="navigation" layout="column"> <md-button>Button1</md-button> <md-button>Button2</md-button> </md-content> </md-sidenav> <md-content flex layout="column"> <md-toolbar> <div class="md-toolbar-tools"> <button class="md-icon-button md-button" aria-label="Settings"> <md-icon md-svg-icon="images/icons/menu.svg" aria-hidden="true"></md-icon> <div class="md-ripple-container"></div> </button> <md-button>Button1</md-button> <!-- how to left align this text inside a stretched button --> <md-button>Button2</md-button> <span flex=""></span> <md-button>Right side button</md-button> <button class="md-icon-button md-button" aria-label="More"> <md-icon md-svg-icon="images/icons/more_vert.svg" aria-hidden="true"></md-icon> <div class="md-ripple-container"></div> </button> </div> </md-toolbar> <md-content flex> Some content !! </md-content> </md-content> 

Answer 1

Use an empty range with flex, as shown below. You can even specify a flex value to get a more specific location.

 <div layout="row" layout-align="start center" flex> <md-button>button 1 </md-button> <span flex></span> </div> 

Or, if you just want to align the text inside the button, try the following:

 <md-button style="text-align:left">button </md-button> 

Answer 2

You can do this if you use the md-toolbar (Angular 4):

HTML

 <md-toolbar id="toolbar" color="primary" > <md-button>button 1 </md-button> <span class="spacing"></span> <md-button>button 2 </md-button> </md-toolbar> 

OR

 <md-toolbar id="toolbar" color="primary"> <md-button>button 1 </md-button> <span style="flex: 1 1 auto;"></span> <md-button>button 2 </md-button> </md-toolbar> 

Your CSS if there is no style in HTML:

 .spacing { flex: 1 1 auto; } 

Hope this helps someone.