CSS到多个垫子响应

Question

我有一个具有角度材料的项目，其中我正在创建一个带有几张垫子卡的组件。我要做的是根据卡的宽度使屏幕响应。

目前，只有该卡较小，但不是标题或内容。所有卡都出现在单列中。

这是我的component.html：

<div class="container">
      <mat-card *ngFor="let properties of menuComponent.fillerNav" class = "mat-elevation-z4">
        <mat-card-header>
          <mat-card-title>
            {{properties.name}}
            <mat-icon class="iconMenu">{{properties.icon}}</mat-icon>
          </mat-card-title>
        </mat-card-header>
        <mat-divider></mat-divider>
        <mat-card-content>
          <p>
            total
          </p>
        </mat-card-content>
      </mat-card>
</div>

这是我的component.scss：

mat-card {
  width: 20%
}

这是带有f12的窗口的视图：

Answer 1

为了使其在html上使用，以这种方式尝试

.flex-me 
{   display: inline-flex; 
  flex-flow: row wrap;    
}
mat-card{
    width: fit-content;
}

也是一个完整的示例如何使用Flex布局在Angular中创建响应式卡网格