3

I am trying to specify some gap between two rows while displaying mat cards. But it is not showing properly after using flex.

card flex

This is the HTML file:-

<div fxLayout="row wrap" fxLayoutAlign="space-around">
  <mat-card class="list-card" *ngFor="let uri of urlData" fxLayoutGap="20px">
    <mat-card-header>
      <mat-card-title>{{uri.title}}</mat-card-title>
      <mat-card-subtitle>3 weeks ago</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg(58 kB)
https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg
" alt="img alt title">
    <mat-card-content>
      <a href="https://medium.....64" class="mat-caption">
        {{uri.documentURL}} </a>
      <!-- <section> -->
      <mat-chip-list>
        <mat-chip>Angular</mat-chip>
      </mat-chip-list>
      <!-- </section> -->
      <p>
        {{uri.description}}
      </p>
    </mat-card-content>
    <mat-card-actions>
      <mat-icon>share_outline</mat-icon>
      <mat-icon>bookmark_outline</mat-icon>
    </mat-card-actions>
  </mat-card>
</div>

This is the css:-

.list-card{
    max-width: 260px;
}
NoobCoder
  • 493
  • 8
  • 25

2 Answers2

1

There are two options to do that

1: Use flexLayoutGap as you had done for row gap, but you need to customize your structure as mention here for bottom gap you need to use flex column as well.

2: Use margin-bottom on your card class .list-card

.list-card{
   margin-bottom: 20px;
}
Awais
  • 4,752
  • 4
  • 17
  • 40
  • Thanks let me try – NoobCoder Dec 27 '19 at 10:12
  • @NoobCoder when using `fxLayoutGap` you cant aling item in middle for that you need to remove that and use `fxFlex` instead so that they take space according to the view-port width. you can alos use `fxFlex=30` for percent or 'fxFlex=30px' in pixels [Reference](https://tburleson-layouts-demos.firebaseapp.com/#/docs) – Awais Dec 27 '19 at 11:44
0

.list-card{ max-width: 260px; margin: 10px; }

try this code

Nut Nin
  • 1
  • 1