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

问题描述 投票:0回答:1

我有超过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 Layout执行此操作?

css flexbox angular-material angular-flex-layout
1个回答
0
投票

这适合我

  <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>
© www.soinside.com 2019 - 2024. All rights reserved.