grow - propiedad order css

Diseño de mampostería horizontal con flexbox CSS solamente

Question

Esta pregunta ya tiene una respuesta aquí:

• Establezca que los niños de flexbox tengan diferentes alturas para agotar el espacio disponible 1 respuesta

Intento crear un diseño de mampostería horizontal usando solo CSS y flexbox. El problema que tengo es que hay lagunas verticales entre los elementos, sin usar align-left: stretch; ¿Es posible cerrar los huecos?

.card-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.card {
width: 25%;
flex: 1 0 auto;
}

codepen completo aquí

Answer 1

Aquí hay una opción que utiliza columnas envueltas, pero requiere una altura fija.

.card-container {
display: flex;
flex-flow: column wrap;
height:100vh;
align-items: center;
background-color: #888;
}

Una mejor opción para el diseño de mampostería CSS es usar columnas, un ejemplo es en esta publicación de blog http://w3bits.com/css-masonry/

.masonry { /* Masonry container */
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}

Answer 2

La envoltura de caja flexible envuelve los elementos desbordados a una nueva fila. Esta nueva fila tiene, al igual que la fila anterior, la altura del niño flexible más alto en ella. No permitirá que los elementos en la fila salgan de los límites de las filas.

Desafortunadamente, no, no puedes cerrar los huecos verticales con flexbox.