Angular Material and Flex layout - Setup responsvile images side by side and in multiple rows

Question

I have more than 1000 designs and designs increase over time.

I want to display images in 200*200 size, side by side and start displaying next row once it reaches end.

here is my code.

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

I am trying to accomplish pretty much the same but more in responsive way using ngFor Link

How can I do this using Flex Layout?

you need to use fxFlex on your images to create the correct sizing for the children. — jcuypers, Mar 24 '19 at 16:16

score 0 · Answer 1 · answered Mar 24 '19 at 19:19

This works for me

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

Angular Material and Flex layout - Setup responsvile images side by side and in multiple rows

1 Answers1