title: Mat-Toolbar Align Items (left, center and right)
body: <p>I developed a toolbar but I can't align elements on the same line, left, center and right.</p>
  
  <p>Does anyone know how I can align these elements?</p>
  
  <p>I notice that the elements with the name Align left are aligned to the left, the align center aligned to the center and the align right aligned to the right.</p>
  
  <p>Thanks</p>
  
  <p><a href="https://stackblitz.com/edit/angular-ipxkfu?file=src%2Fapp%2Fapp.component.html" rel="noreferrer">Demo</a></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>  &lt;mat-sidenav-content fxFlexFill&gt;  
        &lt;mat-toolbar color="primary"&gt;
      &lt;mat-toolbar-row&gt;
        &lt;button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm&gt;
          &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
        &lt;/button&gt;
  
        &lt;div fxShow="true" fxHide.lt-md&gt;
          &lt;a href="#" mat-button&gt;Align left&lt;/a&gt;
          &lt;a href="#" mat-button&gt;Align left&lt;/a&gt;
          &lt;a href="#" mat-button&gt;Align center&lt;/a&gt;
          &lt;a href="#" mat-button&gt;Align center&lt;/a&gt;
          &lt;a href="#" mat-button&gt;Align right&lt;/a&gt;
          &lt;a href="#" mat-button&gt;Align right&lt;/a&gt;
        &lt;/div&gt;
      &lt;/mat-toolbar-row&gt;
    &lt;/mat-toolbar&gt;
  </code></pre>