使用Materialize实现不等高度的网格布局

Question

我使用Materialize构建了一个网格系统，其中列的高度不相等（动态内容）。

每行应该有3列。我希望每一行都从新的一行开始。然而，这是我得到的结果-https://codepen.io/anon/pen/QaVKyG。如您所见，第四个卡片似乎在一个奇怪的位置开始，留下很多左侧的空白。

我尝试使用flexbox，如此处所示 - https://codepen.io/anon/pen/rpqLgy

.row { display:flex; flex-wrap: wrap; }

然而，这种方法的问题在于最后一行的列似乎没有左对齐。简而言之，我希望网格与使用Bootstrap时的工作方式相同（如此https://codepen.io/anon/pen/vpVvKv）。正如您所见，对于Bootstrap，下一行的列从下一行开始，即使列的高度不相等。我似乎无法使用Materialize实现这一点。任何关于这两种解决方案的帮助都将不胜感激（使用flexbox或不使用flexbox）。谢谢！

- Jason

---

嗨，Jason，请在帖子中包含您代码的 [mcve]，而不仅仅是链接到四个不同的 CodePen。 - TylerH

抱歉，@TylerH。我删除了其中一个重复的CodePen链接。如果还有疑惑，请告诉我。 - Jason

Answer 1

我不确定这是否是您想要实现的..

我的做法是创建一个cardHolder，然后在其中放置卡片。

<div class="cardHolder">
  <div class="card"></div>
  <div class="card2"></div>
  <div class="card3"></div>
</div>

然后我为卡片的父级元素做了一个 flex box 样式。

.cardHolder{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-flow: row wrap;
  width:100%;
}

接着，我设置了卡片的宽度，因为您希望每行有3列。我使用calc函数初始化了卡片的宽度。

.cardHolder div{
  width:calc(100% / 3);
  padding:0;
  margin:0;
}

然后创建一个媒体查询，在屏幕尺寸小于600像素时初始化卡片的全宽度。

@media only screen and (max-width: 600px){
  .cardHolder div{
   width:100%; 
  }
}

请查看链接以获取示例代码.. https://codepen.io/deibu21/pen/jYedep/?editors=1100 希望这能有所帮助。

- davecar21

Answer 2

你也可以使用相等的最大高度和最小高度。例如-

.card{
     border:1px solid black; 
     min-height:450px; 
     max-height:450px
     }

这将使您的卡片大小相等并对齐。

- Rupal