Angular 角材料2张卡片，具有柔性布局，彼此重叠

我正在尝试使用flex布局使Angular Material 2卡正常工作，以便在调整浏览器的大小时，渲染的列数会发生变化。我正在努力实现类似于工作原理的东西

内容
切换

尽管如此，您可以看到，当一系列有角度的材质卡片需要包装时，它们会有一点重叠

---

有人知道我需要用flex布局做什么才能让下一行的项目之间有一定的余量吗？它们具有

fxLayoutGap

属性，但这似乎只适用于紧邻内容的对象之间的水槽，而不适用于内容下方或上方。

约翰纳森，我感觉到了你的痛苦。即使没有使用flex布局，我也很难让md卡完全按照我所希望的那样工作——但我会说这是可以做到的，但通常会损害可维护性和时间效率

我没有出于自己的目的实现flex布局，因为我在核心CSS中使用flex方法已经有一段时间了

这不是我网站的插件，但它是我能让你看的最好的例子：-你会在登录页上看到，“工作”部分是由卡片组成的。这些卡片是基于材料设计的方法，但被剥离到布局的本质，我想要的

这是我用来完成它们的间距和响应的CSS——请注意，“工作”是卡片的父容器

.work {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.card {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.card .card-content {
  flex: 1;
  padding: 0.25em 0.3em 0;
}

.card .card-content p {
  font-size: 1em;
  line-height: 1.2;
  margin-bottom: 0.5em;
}


@media only screen and (min-width: 37.50em) {
  .card {
    max-width: calc(50% - 20px);
  }
}

@media only screen and (min-width: 75em) {
  .card {
    width: calc(33.33333% - 20px);
  }
}

希望，正如您所看到的，帮助卡片保持其空间的主要机制之一是与边距声明直接相关的宽度计算。因此，如果你想在一张卡的每一面都有10px的边距，那么宽度需要计算你想让这张卡占据的屏幕的百分比，减去边距量乘以2

FWIW，我发现使用MaterialDesign2要么完全满意它的行为，要么尽量减少它的影响，以享受它

MaterialDesign2仍处于测试阶段，因此当您继续使用此类代码库时，请记住，随着这些代码库的增长和成熟，可能需要进行调整以保持设计的完整性

.work {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.card {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.card .card-content {
  flex: 1;
  padding: 0.25em 0.3em 0;
}

.card .card-content p {
  font-size: 1em;
  line-height: 1.2;
  margin-bottom: 0.5em;
}


@media only screen and (min-width: 37.50em) {
  .card {
    max-width: calc(50% - 20px);
  }
}

@media only screen and (min-width: 75em) {
  .card {
    width: calc(33.33333% - 20px);
  }
}