压缩行 - CSS

Question

我有一个主容器 div，里面有多个 div。我试着弯曲它然后弯曲包裹。它仅适用于两列，问题是第一列有空间，并且它与第二列中的第二个 div 对齐。我只想有两列并且不彼此对齐。

如何在不修改 HTML 结构的情况下做到这一点？

这是代码，请在

full-page

中查看

.mainContent{
  display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    align-content: space-between;
}

.content{
  background: green;
  width: 49%;
}

<div class='mainContent'>
  <div class='content' style="height:200px"></div>
  <div class='content' style="height:500px"></div>
  <div class='content' style="height:100px"></div>
  <div class='content' style="height:700px"></div>
  <div class='content' style="height:500px"></div>
  <div class='content' style="height:300px"></div>
</div>

Answer 1

这是因为，

gap: 15px

和

width : 49%

。 如果浏览器宽度足够宽，则实现间隙并将内容对齐两列，但如果不是，那就是你说的。

所以，请像这样修复。

.mainContent{
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px; //=> it is important
  justify-content: space-between;
  align-items: space-between;
}

.content{
  background: green;
  width: 49%;
}