Flexbox 最佳填充答案

【问题标题】：Flexbox optimal fillFlexbox 最佳填充
【发布时间】：2019-11-26 08:17:36
【问题描述】：

我有一个基本的 flexbox 列换行布局，里面有一个固定宽度的容器和固定宽度的可变高度元素。

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

【问题讨论】：

flex-direction: row; height: auto; 或 #container 可以完成这项工作吗？据我了解，这就是您使用固定高度实现的目标，正如您所说，它是optimal way。
@AndreyMedvedev 但元素流向会有所不同。我需要它是列式的，而不是行式的
一个元素没有固定高度就不能换行
column-css 可能是你要找的：codepen.io/gc-nomade/pen/wvvbvyp infos developer.mozilla.org/en-US/docs/Web/CSS/columns
@G-Cyr 经过实验后，我使用了您的解决方案，尽管有一些警告，但它确实满足了我的需求。随意将其发布为答案，以便我接受。

标签： html css flexbox

【解决方案1】：

Column CSS 似乎是您正在寻找的东西。无需设置height。您可以设置单个规则，例如 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 多列布局是 CSS 的一个模块，增加了对多列布局的支持。支持确定布局中的列数，以及内容应如何在列之间流动、列之间的间隙大小以及列分隔线（称为列规则）及其外观。

【讨论】：