Angular Material Card responsive flexLayout

Question

我想以这样的方式定位卡片数组:手机上每列显示一张卡片，标签和桌面浏览器分别显示两张和三张。我试过了:https://angular-u6akh5.stackblitz.io

import { Component } from "@angular/core";
@Component({
selector: "cards",
template: `
<div fxLayout="row" fxLayoutWrap>
<mat-card
fxFlex.lg="33%"
fxFlex.lt-lg="50%"
fxFlex.xs="100%"
*ngFor="let num of nums"
>
{{ num }}
</mat-card>
</div>
`,
styles: ["mat-card { max-width: 360px; }"]
})
export class Cards {
nums = [1, 2, 3, 4, 5];
}

Answer 1

你也可以用纯CSS网格来实现这一点，而不是依赖于FlexLayoutModule。您可以通过组合repeat和minmax来实现响应性。

.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-column-gap: 1rem; // optional
grid-row-gap: 1rem; // optional
}

<div class="card-container">
<mat-card *ngFor="let num of nums">{{num}}</mat-card>
</div>

下面是一个更详细的例子:

https://www.jitblox.com/project/6ieC-YQVdG/responsive-cards

Answer 2

您需要将<div fxLayout="row" fxLayoutWrap>改为<div fxLayout="row wrap">

fxlayoutrap已被删除，这是现在正确编写它的方式。此外，在您的示例中，您忘记安装软件包FlexLayoutModule-在您完成这两件事之后，一切都应该按预期工作