Flexbox optimal fill | 易学教程

问题

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.

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.

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.

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?

Code Source: CodePen

回答1:

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.

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>

see:

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.

来源：https://stackoverflow.com/questions/59012541/flexbox-optimal-fill

标签

html

css

flexbox