Angular Material Card 响应式 flexLayout答案

【问题标题】：Angular Material Card responsive flexLayoutAngular Material Card 响应式 flexLayout
【发布时间】：2021-01-17 03:13:09
【问题描述】：

我想以这样一种方式放置一组卡片，即手机上的每列显示一张卡片，标签页和桌面浏览器分别显示两张和三张。我试过了：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];
}

【问题讨论】：

不确定为什么 stackblitz 没有打开..

标签： angular angular-material

【解决方案1】：

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

fxLayoutWrap has been removed，这是当今正确编写它的方式。此外，在您的示例中，您忘记安装软件包 FlexLayoutModule - 完成这两件事后，一切都应该按预期工作

【讨论】：

【解决方案2】：

您也可以使用纯 CSS 网格而不是依赖于 FlexLayoutModule 来实现这一点。您可以通过combining repeat with 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

【讨论】：