代码之家 › 专栏 › 技术社区 › Chatra

角材料和柔性布局-设置Responsile图像并排和多行

angular-flex-layout angular-material flex css

Chatra · 技术社区 · 7 年前

我有超过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实现这一点?

0 回复 | 直到 7 年前

Chatra 7 年前

这对我有用

  <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>

推荐文章

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

Bitan Basak · 使垫子自动完成功能类似于Bootstrap选择

1 年前