css - bootstrap - flexbox grid

Establezca que los niños de flexbox tengan diferentes alturas para usar el espacio disponible

Question

Utilizando un diseño de dos columnas de flexbox, ¿cómo se puede hacer que los niños de diferentes tamaños ocupen todo el espacio disponible, en lugar de que todos los niños tengan la altura del niño más alto de la fila?

Configuré una demostración en jsbin que ilustra el problema. Me gustaría que todos los niños sean del tamaño de sus contenidos envueltos.

#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>

Answer 1

Así es como se espera que se comporten las filas de Flexbox. Flexbox no pretende recrear Masonry con CSS puro: los elementos en una fila no pueden ocupar el espacio asignado para una fila anterior / siguiente (lo mismo ocurre con las columnas si usa la orientación de columna). Puede usar elementos alineados para evitar que se estiren, pero eso es todo:

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;
}

De lo contrario, debe utilizar la orientación de columna o el módulo de varias columnas (consulte la respuesta SO: https://stackoverflow.com/a/20862961/1652962 )