Desarrollé una barra de herramientas pero no puedo alinear elementos en la misma línea, izquierda, centro y derecha.
¿Alguien sabe cómo puedo alinear estos elementos?
Observo que los elementos con el nombre Alinear a la izquierda están alineados a la izquierda, el centro alineado al centro y el alineado a la derecha alineado a la derecha.
Gracias
Código
<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>css. Esto se expande para ocupar el máximo espacio disponible.
.flexExpand { flex: 1 1 auto; }en su plantilla, use la utilidad flexExpand para separar los elementos
<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>Estás buscando algo así ?
<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>