包裹在较高的元素上

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;
}

这是更新后的JSFiddle。