使用 Flex 动态创建卡片并安排其布局

Posted 2023-03-06

【中文标题】使用 Flex 动态创建卡片并安排其布局

【英文标题】：Create cards dynamically and arrange their layout using Flex

【发布时间】：2019-09-06 02:45:37

【问题描述】：

我想创建 mat-cards 并在其中包含一些内容。卡片的数量可能因 api 的内容而异（如果 api 给我 5 个参数的数据，则必须创建 5 张卡片）这些卡片必须像 3 或 4 一样连续对齐。尝试谷歌搜索如何做到这一点，但找不到。有人可以帮我吗？

<div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
 </div>

这会连续给出 5 个元素。我希望第 5 个元素从新行开始，因为 fxFlex 百分比总和已达到 100%。

<div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
 </div>

 <div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
 </div>

当我这样做时效果很好。

但是当卡片数量动态变化时，我如何使用 ngFor 做到这一点？

【问题讨论】：

两件事：1.使用*ngFor动态创建mat-cards。 2. 检查flex-wrap 属性以允许内容溢出到下一行。

【参考方案1】：

<div style="display:flex; flex-wrap:wrap; justify-content:flex-start">
    <div *ngFor="let card of Cards">
        <mat-card style="width:YOUR-DESIRED-WIDTH"></mat-card>
    </div>
</div>

我将您的卡片视为一组卡片。如果我们像这样使用 flex，它将包装内容并根据可用的屏幕空间自动对齐卡片。

【参考方案2】：

在模板的fxLayout 属性中使用wrap：

<div fxLayout="row wrap" fxLayoutAlign="center">
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
</div>

见stackblitz example here。

【讨论】：

布局项目在我的情况下是动态的，可能 2 或 3 或 4 个项目，应该相应地占用相等的空间。