flexbox - 如何在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

标签： flexboxangular-flex-layout

Answer 1

问题似乎是fxLayout="row wrap"功能。医生的建议说要使用fxLayoutGap="10px grid"，但这更有效。

我想出了这个css3，它解决了你的问题。不是很优雅，灵活布局，但这似乎是一个限制

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