我有一个基本的 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>
浏览器将其放在一列中，这是非常合乎逻辑的。
现在，如果我取消注释height: 160px定义在#container的 css，它以最佳方式进行布局（如果您足够幸运能够捕获一组良好的随机高度，但我希望这足以演示该行为）。容器以水平方向最佳填充，不会溢出，底部也没有任何多余空间。
问题是我现在不知道元素的数量和它们的高度（好吧，我知道，但不是在 css 中）。可能只有一个元素或数百个元素。
是否可以使用纯 CSS 自动调整容器高度到某个最佳值，以适应尽可能多的宽度元素？如果没有的话，有没有简单的方法用JS来实现呢？
代码来源：CodePen https://codepen.io/s0me0ne-unkn0wn/pen/LYYoPoo
列CSS https://developer.mozilla.org/en-US/docs/Web/CSS/columns似乎正是您正在寻找的。无需设置height。您可以设置单个规则，例如column-count or column-width。它将逐列填充。
您的代码设置中的可能演示仅column-width或响应式变体：https://codepen.io/gc-nomade/pen/wvvbvyp 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>
see:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns
CSS 多列布局是 CSS 的一个模块，添加了对多列布局的支持。支持建立布局中的列数、内容应如何在列之间流动、列之间的间隙大小、列分隔线（称为列规则）及其外观。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
