Flexbox最佳填充 [英] Flexbox optimal fill

问题描述

我有一个基本的flexbox列换行布局，其中包含一个固定宽度的容器，并且其中包含固定宽度的可变高度元素.

I have a basic flexbox column-wrap layout with a fixed width container and fixed width variable height elements inside it.

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>

浏览器将其放在单个列中，这很合逻辑.

Browser lays it out in a single column, which is pretty logical.

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

Now, if I uncomment height: 160px definition in #container's css, it lays it out in an optimal way (if you're lucky enough to catch a good set of random heights, but I hope that's enough to demonstrate the behavior). Container is optimally filled in horizontal direction, does not overflow and does not have any excess space in the bottom part.

问题是我目前不知道元素的数量及其高度(嗯，我知道，但是在css中不知道).可能只有一个元素，也可能只有一百个元素.

The problem is I don't know the number of elements and their heights at this point (well, I do, but not in css). There may be just a single element or 100s of them.

是否可以使用纯CSS将容器高度自动调整到某个最佳值，以使宽度尽可能多地适合元素?如果没有，有没有简单的方法可以用JS实现呢?

Is it possible to auto-adjust container height to some optimal value to fit as many elements by width as possible using pure css? If no, is there a simple way to achieve that with JS?

代码来源:代码笔

推荐答案

Column CSS 似乎正是您想要的.无需设置height.您可以设置单个规则，例如column-count或column-width.它将逐列填充.

Column CSS seems to be what you are looking for. no need to set an height. You can set a single rule such as a column-count or column-width . it will be filled columns by columns.

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

possible demo from your code setting only a column-width or a responsive variant : 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/zh-CN /docs/Web/CSS/CSS_Columns

CSS多列布局是CSS的一个模块，它增加了对多列布局的支持.支持确定布局中的列数，内容应如何在列之间流动，列之间的间隙大小以及列分隔线(称为列规则)及其外观.

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.

这篇关于Flexbox最佳填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！