как равномерно распределить элементы по вертикали, сохраняя при этом свободное плавание, используя CSS

Question

Я пытаюсь равномерно распределить элементы списка по вертикали, сохраняя их плавающими. Количество элементов равно Dynami c, поэтому есть длина строки. Высота окружающего контейнера составляет c. Вот пример:

----------------------------------
| element1 | element2 | element3 |
|                                |
| el4 | el5 | element6 | elem7   |
|                                |
| el8 | element9 | element10     |
|                                |
|                                |
|                                |
----------------------------------

Это желательно:

----------------------------------
| element1 | element2 | element3 |
|                                |
|                                |
| el4 | el5 | element6 | elem7   |
|                                |
|                                |
| el8 | element9 | element10     |
|                                |
----------------------------------

Поскольку я не знаю, сколько элементов в контейнере, я не могу распределить их по строкам таблицы. Как видно из примера, строка 2 содержит 4 элемента, тогда как строки 1 и 3 содержат 3 элемента. Я пытался работать с line-height, но это не Dynami c. Если я получу больше элементов, высота строки должна будет соответственно уменьшиться.

Я думал об определении количества элементов, как в Может ли CSS определить количество дочерних элементов, которое имеет элемент? , но это не охватывает разную ширину элементов. Чистый счет тут не поможет.

Есть идеи, как решить эту проблему, используя чистый CSS?

Answer 1

Здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Установите следующие реквизиты для родительского контейнера

display: flex;
flex-wrap: wrap;
align-items: space-between;

Answer 2

Я оставляю вам два примера Flex.
Я не знаю, что именно вы хотите.
javascript просто чтобы дать вам случайный размер для теста.
Я получил слишком много, вы можете удалить некоторые свойства.

var a = document.getElementsByTagName("div");
for(var i in a){
  if(!a.hasOwnProperty(i)){continue;}
  if(i == 0){continue;}
  a[i].style.minWidth = Math.floor(Math.random()*200+100) +  "px";
  a[i].style.height = Math.floor(Math.random()*20+5) +  "px";
}

div div{
  border: 1px solid;
  display: block;
  background-color: #66F;

}
.container{
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.container > div{
  margin: 5px auto;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

var a = document.getElementsByTagName("div");
for(var i in a){
  if(!a.hasOwnProperty(i)){continue;}
  if(i == 0){continue;}
  a[i].style.minWidth = Math.floor(Math.random()*200+100) +  "px";
  a[i].style.height = Math.floor(Math.random()*20+5) +  "px";
}

div div{
  border: 1px solid;
  display: block;
  background-color: #66F;
}
.container{
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.container > div{
  flex-shrink: 0;
  flex-grow: 1;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>