如何在 fxlayoutgap 中使整体卡的间隙均匀答案

【问题标题】：how to make even gap for overall card in flexlayoutgap如何在 fxlayoutgap 中使整体卡的间隙均匀
【发布时间】：2019-03-28 17:22:05
【问题描述】：

我尝试制作一个响应式卡片布局，每张卡片之间的间隙均匀，不幸的是底部空间没有出现在卡片上，但右侧间隙显示，任何人都可以帮助如何实现这种情况。下面是我的代码

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

【问题讨论】：

标签： flexbox angular-flex-layout

【解决方案1】：

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

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

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

【讨论】：