как сделать равномерный зазор для общей карты в flexlayoutgap

Question

Я попытался создать адаптивный макет карты с равномерным зазором между картами, к сожалению, на карточке нет свободного места, но отображается правый зазор, может ли кто-нибудь помочь в достижении этого сценария. ниже мой код

Код HTML

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="25px">
  <mat-card *ngFor="let member of members" fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" >

стек-блиц-ссылка

https://stackblitz.com/edit/card-responsive?file=app/card-overview-example.html

Answer 1

Кажется, проблема в fxLayout="row wrap" функциональности. предложение от доктора говорит использовать fxLayoutGap="10px grid", но это работает еще меньше.

Я придумал этот css3, который решил вашу проблему. не очень элегантно, с гибкой компоновкой, но это кажется ограничением

mat-card.mat-card { 
  margin-bottom: 10px;
}