[英]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.