Angular 网格对齐的 Flex 布局换行不起作用

Question

我已经 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 网格换行？

编辑

Answer 1

这是解决方案，可以在 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 网格对齐的 Flex 布局换行不起作用

Angular Flex Layout row wrap with grid align not working

css

angular

flexbox

angular-material

angular-flex-layout