如何在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)" >

stack-blitz链接

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