让包装的flexbox的孩子挤进父母的身高

Question

我想构建一个动态为新单元格腾出空间并最终环绕的网格。我认为有些图片最能说明我的目的。

黑框是视口，浅蓝框是添加的元素。

一个盒子只填充整个视口：

随着更多的盒子被添加，布局会横向挤压它们：

直到达到最小宽度并且布局环绕：

最好的方法是什么？我尝试使用flexbox，但是在启用flex-wrap时没有设法将框垂直挤入视口中 - 它们只会溢出。

编辑：添加了我尝试过的代码段：

main {
  display: flex;
  flex-wrap: wrap;
  height: 210px;
  width: 330px;
  border: solid 1px black;
  margin-bottom: 30px;
}

main > div {
  flex: 1 0 100px;
  background: lightblue;
  margin: 5px;
}

main > div > p {
  /* Content placeholder */
  height: 200px;
}

This looks relatively good (except for the width of the 4th div):
<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

As soon as you add content, it breaks:
<main>
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
</main>

Answer 1

我没有看到设置断点的简单方法，却不知道它将包含多少元素，但使用flex-basis可能会对你有所帮助，我也发现this可能是你的解决方案。