Javascript 环绕更高的元素

我有一个列表，里面有一些元素。 如果任何项目具有相同的高度，则所有项目包装正确。 但是，如果单个项目的高度大于其他项目，则项目将在较高元素的底部包裹

在这里，您可以看到我的示例：

以下是我的简单html列表：

<div id="flexbox-container">
  <div class="small-container"></div>
  <div class="big-container"></div>
  <div class="small-container"></div>
  <div class="small-container"></div>
  <div class="small-container"></div>
  <div class="small-container"></div>
</div>

我正在使用flexbox浮动这些项目。如果所有项目都具有相同的高，则一切都会按预期进行。但是，如果第二个项目与其他元素具有双高，则这些项目会忽略差距

---

我想用下一个项目来填补空白，我如何才能做到这一点？

您可以将其改为使用

flex direction:column

，但如果其中一个项目比其他项目宽，您会遇到同样的问题。您还需要在

#flexbox container

DIV上指定一个

height

属性，以确保列确实在页面中换行，而不是继续向下

大概是这样的：

#flexbox-container {
  width: 220px;
  height: 500px;
  background-color: lightgrey;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 10px;
}

这是最新版本。

看一看

#flexbox-container {
  width: 220px;
  height: 500px;
  background-color: lightgrey;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 10px;
}