将flexbox子级设置为不同的高度以占用可用空间

  • Z时代
  • 2024-01-10
  • 分类：问答

使用两列flexbox布局，如何使大小不同的子代填充所有可用空间，而不是使所有子代都具有该行中最高的子代的高度？

我在jsbin上建立了一个演示该问题的演示。我希望所有的孩子都和他们包裹的东西一样大。

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
}
.cell {
  width: 300px;
  flex; 1 auto;
}
<div id="container">
<div class="cell">
Cells with arbitrarily long content.</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
</div>
</body>
</html>

回答：

这就是Flexbox行的预期行为。Flexbox并不是要用纯CSS重新创建Masonry：一行中的项目不能占用为前一行/后一行分配的空间（如果您使用列方向，则列也是如此）。您可以使用align-

items防止它们拉伸，仅此而已：

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

以上是 将flexbox子级设置为不同的高度以占用可用空间 的全部内容， 来源链接： utcz.com/qa/412186.html

回到顶部