[英]Mat-Toolbar Align Items (left, center and right)
我开发了一个工具栏,但我无法在同一行、左、中和右对齐元素。
有谁知道我如何对齐这些元素?
我注意到名称为 Align left 的元素向左对齐,align center 与 center 对齐,align right 向右对齐。
谢谢
代码
<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。 这会扩展以占用最大可用空间。
.flexExpand {
flex: 1 1 auto;
}
在您的模板中使用 flexExpand 实用程序来分隔项目
<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>
你在寻找这样的东西吗?
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.