Angular 网格对齐的 Flex 布局换行不起作用
Angular Flex Layout row wrap with grid align not working
我已经 Angular v13
申请 @angular/flex-layout
也 v13
。问题是具有网格对齐的 row wrap
类型的 Flex 布局未按预期工作。下面是 html
代码块。该应用程序托管在 stackblitz。如果我从 fxLayoutGap
中删除 grid
,布局将在没有 gutter space
的情况下呈现 second/subsequent 行。
<div class="cards-container" style="width: 100%; syntax: 100%;">
<div
fxLayout="row wrap"
fxLayoutAlign="start start"
fxLayoutGap="32px 12px grid"
>
<ng-container *ngFor="let item of cards">
<mat-card>
<mat-card-header>
<mat-card-title>{{ item }}</mat-card-title>
<mat-card-subtitle>subtitle</mat-card-subtitle>
</mat-card-header>
<img
mat-card-image
height="240px"
width="240px"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
<mat-card-content> </mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>Ok</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</ng-container>
</div>
</div>
如何配置 @angular/flex-layout
网格换行?
编辑
这是解决方案,可以在 stackblitz 访问更新的代码。基本上我们需要将 div 包裹在 mat-card
周围并添加 fxFlex
百分比。在我的例子中,我将它设置为 25,这样 4 张卡片首先进入原始状态。
<div class="cards-container" style="width: 100%; syntax: 100%;">
<div
fxLayout="row wrap"
fxLayoutAlign="start start"
fxLayoutGap="32px 12px grid"
>
<ng-container *ngFor="let item of cards">
<div fxFlex="25">
<mat-card>
<mat-card-header>
<mat-card-title>{{ item }}</mat-card-title>
<mat-card-subtitle>subtitle</mat-card-subtitle>
</mat-card-header>
<img
mat-card-image
height="240px"
width="240px"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
<mat-card-content> </mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>Ok</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</div>
</ng-container>
</div>
</div>
我已经 Angular v13
申请 @angular/flex-layout
也 v13
。问题是具有网格对齐的 row wrap
类型的 Flex 布局未按预期工作。下面是 html
代码块。该应用程序托管在 stackblitz。如果我从 fxLayoutGap
中删除 grid
,布局将在没有 gutter space
的情况下呈现 second/subsequent 行。
<div class="cards-container" style="width: 100%; syntax: 100%;">
<div
fxLayout="row wrap"
fxLayoutAlign="start start"
fxLayoutGap="32px 12px grid"
>
<ng-container *ngFor="let item of cards">
<mat-card>
<mat-card-header>
<mat-card-title>{{ item }}</mat-card-title>
<mat-card-subtitle>subtitle</mat-card-subtitle>
</mat-card-header>
<img
mat-card-image
height="240px"
width="240px"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
<mat-card-content> </mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>Ok</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</ng-container>
</div>
</div>
如何配置 @angular/flex-layout
网格换行?
编辑
这是解决方案,可以在 stackblitz 访问更新的代码。基本上我们需要将 div 包裹在 mat-card
周围并添加 fxFlex
百分比。在我的例子中,我将它设置为 25,这样 4 张卡片首先进入原始状态。
<div class="cards-container" style="width: 100%; syntax: 100%;">
<div
fxLayout="row wrap"
fxLayoutAlign="start start"
fxLayoutGap="32px 12px grid"
>
<ng-container *ngFor="let item of cards">
<div fxFlex="25">
<mat-card>
<mat-card-header>
<mat-card-title>{{ item }}</mat-card-title>
<mat-card-subtitle>subtitle</mat-card-subtitle>
</mat-card-header>
<img
mat-card-image
height="240px"
width="240px"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
<mat-card-content> </mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>Ok</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</div>
</ng-container>
</div>
</div>