Website-Suche

css - Mat-Toolbar Elemente ausrichten (links, zentriert und rechts)

Ich habe eine Symbolleiste entwickelt, aber ich kann die Elemente nicht in derselben Zeile links, zentriert und rechts ausrichten.

Weiß jemand, wie ich diese Elemente ausrichten kann?

Mir fällt auf, dass die Elemente mit dem Namen 'Linksbündig' links ausgerichtet sind, die 'Zentriert' ausgerichtet in der Mitte und die 'Rechtsbündig' ausgerichtet rechts.

Danke

Demo

Code

  <mat-sidenav-content fxFlexFill>  
      <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>

      <div fxShow="true" fxHide.lt-md>
        <a href="#" mat-button>Align left</a>
        <a href="#" mat-button>Align left</a>
        <a href="#" mat-button>Align center</a>
        <a href="#" mat-button>Align center</a>
        <a href="#" mat-button>Align right</a>
        <a href="#" mat-button>Align right</a>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>

Antwort #1

CSS. Dies erweitert sich, um den maximal verfügbaren Platz einzunehmen.

.flexExpand {
    flex: 1 1 auto;
}

Verwenden Sie in Ihrer Vorlage das FlexExpand-Dienstprogramm, um die Elemente zu trennen

<mat-toolbar>
<mat-toolbar-row>
 <div >
      <a mat-button [routerLink]="'/accounts'"> Accounts </a>
      <a mat-button [routerLink]="'/create-account'"> Create Account </a>
    </div>
    <span class="flexExpand"></span>
    <div >
      <a mat-button [routerLink]="'/logout'"> Logout </a>
    </div>
    <mat-toolbar-row>
</mat-toolbar>

Antwort #2

Suchst du nach so etwas?

<div fxShow="true" fxHide.lt-md fxFlex fxLayout>
  <!-- The following menu items will be hidden on both SM and XS screen sizes -->
  <div fxFlex>
     <a href="#" mat-button>Align left</a>
     <a href="#" mat-button>Align left</a>
  </div>
  <div fxFlex fxLayoutAlign="center center">
     <a href="#" mat-button>Align center</a>
     <a href="#" mat-button>Align center</a>
  </div>
  <div fxFlex fxLayoutAlign="flex-end center">
     <a href="#" mat-button>Align right</a>
     <a href="#" mat-button>Align right</a>
  </div>
</div>

Verwandte Artikel