环绕更高的元素

Question

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

这里你可以看到我的例子：https://jsfiddle.net/qqouoL6n/

这是我的简单 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>

如您所见，有一个 div，其中一个类表示比其他项更高的项。 这是css：

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

.big-container {
  background-color: orange;
  width: 100px;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.small-container {
  background-color: orange;
  width: 100px;
  height: 110px;
  margin-right: 10px;
  margin-bottom: 10px;
}

我正在使用 flexbox 来浮动这些项目。如果所有项目都具有相同的高度，则一切都按预期工作。但是，如果第二个项目的高度是其他元素的两倍，则项目忽略间隙。

我想实现，下一个项目填补空白，我该怎么做？

Answer 1

您可以将其更改为使用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;
}

这是updated JSFiddle。