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

Question

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

Usando un diseño flexbox de dos columnas, ¿cómo se puede hacer que los niños de diferentes tamaños llenen 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 demo en jsbin que ilustra el problema. Me gustaría que todos los niños fueran del tamaño de su contenido envuelto.

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

28

css css3 flexbox

Author: Adrift, 2014-01-07

Source

1 answers

score 28 · Accepted Answer

Así es como se espera que se comporten las filas de Flexbox. Flexbox no está destinado a recrear Mampostería 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 está utilizando orientación de columna). Puedes usar align-items 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, debería usar la orientación de columna o el módulo de varias columnas (consulte esto respuesta: https://stackoverflow.com/a/20862961/1652962)