html - Flexbox 最佳填充

Question

我有一个基本的 flexbox column-wrap 布局，其中包含一个固定宽度的容器和固定宽度的可变高度元素。

for (let e of document.getElementsByClassName('element')) {
  e.style.height = Math.floor(20 + Math.random() * 50) + 'px';
}

#container {
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 1000px;
  /*   height: 160px; */
}

.element {
  margin: 10px;
  background-color: lightgreen;
  width: 100px;
}

<div id="container">
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
</div>

浏览器将它放在单列中，这很合乎逻辑。

现在，如果我取消注释 #container 的 css 中的 height: 160px 定义，它会以最佳方式布局(如果你足够幸运能够捕获一组很好的随机高度，但我希望这足以证明行为)。容器在水平方向上最佳填充，不会溢出，底部没有任何多余空间。

问题是此时我不知道元素的数量和它们的高度(好吧，我知道，但在 css 中不知道)。可能只有一个元素或数百个元素。

是否可以使用纯 css 将容器高度自动调整到某个最佳值以适应尽可能多的宽度元素？如果不是，是否有一种简单的方法可以使用 JS 实现？

代码来源:CodePen

Answer 1

Column CSS似乎是你在找什么。无需设置高度。您可以设置单个规则，例如 column-count 或 column-width 。它将逐列填充。

您的代码设置的可能演示仅 column-width 或响应变体:https://codepen.io/gc-nomade/pen/wvvbvyp :

for (let e of document.getElementsByClassName('element')) {
  e.style.height = Math.floor(20 + Math.random() * 50) + 'px';
}

#container {
  border: 1px solid blue;
  column-width: 100px;
  flex-wrap: wrap;
  width: 1000px;
}

.element {
  margin: 10px;
  background-color: lightgreen;
  width: 100px;
  display: flex;
}

<div id="container">
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
  <div class="element">Element</div>
</div>

见:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.