使用 angular 和 flex 动态排列目录卡答案

【问题标题】：dynamically arrange catalog cards with angular and flex使用 angular 和 flex 动态排列目录卡
【发布时间】：2018-10-10 09:09:36
【问题描述】：

我有一个卡片组件，还有一个卡片“套牌”组件。我从外部来源获取数据，然后填写卡片并将它们显示在屏幕上。

问题在于，目前我每行显示 1 张卡片，而我实际上希望每行显示约 3 张卡片，并且当屏幕变小时可能能够将其减少到 2 张和 1 张。

我尝试对其进行调整并遵循一些示例，但我的理解中遗漏了一些东西。目前，我将其恢复为“正常”外观（每行 1 个）。我相信我需要以某种方式在数据的*ngFor 部分中使用slice，但我未能以令人愉悦的视觉方式这样做。

这里是一个具有类似情况的示例简化应用程序的链接 - https://stackblitz.com/edit/angular-yjkv2y?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

您能否在 stackblitz 上提供minimal reproducible example，以便我们可以看到它的实际运行情况并查看问题所在？
当然，我现在就这样做。
为什么不用boostrap？
具有讽刺意味的是，一旦我做了一个简化的示例来显示问题，我就能够隔离我的问题并按照另一个示例代码 plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview 解决它们。

标签： angular catalog angular-flex-layout

【解决方案1】：

<div style="padding: 16px 16px 16px 8px" fxLayout="row wrap">
        <div class="fixedContentSize"  *ngFor="let bpmn of bpmns">
            <app-card *ngIf=bpmn class="padding-bottom__16" [title]=bpmn.id [details]=bpmn.info></app-card> 
        </div>
</div>

fxLayout="row wrap" 应该在容器元素上。

我已经在下面使用 css 进行了测试

<div style="padding: 16px 16px 16px 8px" fxLayout="row wrap" style="display: flex; ">
        <div class="fixedContentSize"  *ngFor="let bpmn of bpmns">
            <app-card *ngIf=bpmn class="padding-bottom__16" [title]=bpmn.id [details]=bpmn.info></app-card> 
        </div>
</div>

【讨论】：