1

I work with angular 7 and I use mat-card and flex layout.

I want to place side by side in only row and the three cards will be centered in the page ( meaning the position of the three card will be in the center )

like this : enter image description here

I use this code :

.html

  <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="25px">
    <mat-card class="example-card" *ngFor="let member of members" fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" >
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>{{member.title}}</mat-card-title>
        <mat-card-subtitle>{{member.subtitle}}</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image [src]="member.url" alt="Photo of {{member.title}}">
      <mat-card-content>
        <p>
          {{member.content}}
        </p>
      </mat-card-content>
    </mat-card>
  </div>

.ts

@Component({
  selector: 'app-card-view-demo',
  templateUrl: './card-view-demo.component.html',
  styleUrls: ['./card-view-demo.component.scss']
})
export class CardViewDemoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  members: {title: string, subtitle: string, content: string, url: string}[] = [
    {title: 'Title', subtitle: 'Subtitle', content: 'Content here', url: '../../assets/img/app/shiba2.jpg'},
    {title: 'Title', subtitle: 'Subtitle', content: 'Content here', url: '../../assets/img/app/shiba2.jpg'},
    {title: 'Title', subtitle: 'Subtitle', content: 'Content here', url: '../../assets/img/app/shiba2.jpg'},
  ];

}

.css

.content {
    padding: 16px;
}

.content > mat-card {
    width: 200px;
}

but according to this code the cards are vertical and not in the same row. and each card has 100 % size of the page.

can someone help me to do this by modifying the code of flex layout

franco
  • 1,829
  • 6
  • 42
  • 75
  • Did you try to reduce a little fxLayoutGap? – Gabriel Sereno May 06 '21 at 20:34
  • I try to reduce a little fxLayoutGap fxLayoutGap="5px" without success, the cards are vertical and not in the same row – franco May 07 '21 at 08:08
  • Humm. Another thing: Did you try to remove fxLayout.xs="column" and fxFlex.sm="calc(50%-25px)" to see what happen? – Gabriel Sereno May 07 '21 at 10:37
  • thanks for the response , I try to remove fxLayout.xs="column" and fxFlex.sm="calc(50%-25px)" but same thing the cards are vertical and not in the same row – franco May 07 '21 at 11:18
  • In my stackblitz it worked (click on open new window to see with the right resolution): https://stackblitz.com/edit/flex-layout-angular-material-v1wvef?file=app/app.component.html – Gabriel Sereno May 07 '21 at 11:26

0 Answers0