javascript - 环绕一个更高的元素

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 来 float 这些元素。如果所有元素都具有相同的高值，则一切都会按预期进行。但是，如果第二项的高度是其他元素的两倍，则这些项将忽略差距。

我想实现，用下一个元素填补空白，我该怎么做？

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 .