Angular Material 和 Flex 布局 - 并排和多行设置响应图像答案

【问题标题】：Angular Material and Flex layout - Setup responsvile images side by side and in multiple rowsAngular Material 和 Flex 布局 - 并排和多行设置响应图像
【发布时间】：2019-08-14 12:51:00
【问题描述】：

我有 1000 多个设计，并且随着时间的推移，设计会不断增加。

我想并排显示 200*200 大小的图像，并在到达末尾时开始显示下一行。

这是我的代码。

<div fxLayout="row" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="center">
  <mat-card   
    *ngFor="let design of designs" >
    <img mat-card-image src="data:image/jpg;base64, {{ design.data }}" />
    <div>
      <mat-card-title>{{ design.name }}</mat-card-title>
      <mat-card-subtitle>{{ design.code }}</mat-card-subtitle>
    </div>
  </mat-card>
</div>

我正在尝试使用 ngFor Link 以响应方式完成几乎相同但更多的响应

如何使用 Flex 布局来做到这一点？

【问题讨论】：

您需要在图像上使用 fxFlex 来为孩子创建正确的尺寸。
你能举个例子吗？

标签： css flexbox angular-material angular-flex-layout

【解决方案1】：

这对我有用

  <div
  class="container"
  fxLayout="row wrap"
  fxLayoutAlign="center"
  fxLayoutGap.xs="0" >

  <div class="item" fxFlex="10%" *ngFor="let design of designs">
    <div style="padding:5px">
      <div fxLayoutAlign="center">
        <img
          width="120"
          height="120"
          data-bind="attr: { src: thumbnail }" />
      </div>
      <div fxLayoutAlign="center">
        {{ design.name }}
      </div>
      <div fxLayoutAlign="center">
        {{ design.code }}
      </div>
    </div>
  </div>
</div>

【讨论】：