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，但如果其中一个项目比其他项目更广，则您会遇到同样的问题。您还需要在height DIV上指定#flexbox-container属性，以确保列确实包裹而不是继续向下移动。

这样的事情：

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

这里是updated JSFiddle。

包裹更高的元素

1 个答案: