Установите для детей flexbox разную высоту, чтобы использовать доступное пространство

Используя двухстолбцовый макет flexbox, как сделать детей разных размеров для заполнения всего доступного пространства, а не всех детей с высотой самого высокого дочернего элемента строки?

Я установил демо на jsbin, что иллюстрирует проблему. Я бы хотел, чтобы все дети были размером с их обернутым содержимым.

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex; 1 auto;
}


<div id="container">

<div class="cell">
Cells with arbitrarily long content.</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

</div>

</body>
</html>

Ответ 1

Вот как будут вести себя строки Flexbox. Flexbox не предназначен для воссоздания масонства с чистым CSS: элементы в одной строке не могут занимать пространство, выделенное для предыдущей/следующей строки (то же самое касается столбцов, если вы используете ориентацию столбца). Вы можете использовать элементы выравнивания, чтобы предотвратить их растягивание, но об этом:

http://cssdeck.com/labs/9s9rhrhl

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

В противном случае вы должны использовать ориентацию столбца или модуль с несколькими столбцами (см. этот ответ SO: fooobar.com/questions/250090/...)

Ответ 2

Вы можете создать css только макетные макеты с flexbox, ознакомьтесь с этой статьей для полного объяснения: https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a p >

2017 Обновление: используйте CSS-сетку.