Question

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

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

我尝试调整它，并遵循一些示例，但是我的理解中缺少一些东西。此刻，我将其恢复为“正常”外观（每行1个）。我相信我需要以某种方式在数据slice部分中使用*ngFor，但是我没有以令人满意的视觉方式使用。

此处是指向类似情况的示例简化应用程序的链接-https://stackblitz.com/edit/angular-yjkv2y?file=src%2Fapp%2Fapp.component.html

Answer 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"应该位于conatiner元素上。

我已经使用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>

动态排列带有角度和弹性的目录卡片

1 个答案: