web-dev-qa-db-fra.com

Disposition de maçonnerie horizontale avec flexbox CSS uniquement

J'essaie de créer une disposition de maçonnerie horizontale en utilisant uniquement CSS et flexbox. Le problème que j'ai, c'est qu'il y a des écarts verticaux entre les éléments, sans utiliser align-left: stretch; est-il possible de combler les lacunes?

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  align-items: flex-start;
}


.card {
  width: 25%;
  flex: 1 0 auto;
}

codepen complet ici

csslayoutflexboxmasonry
24
Julian

Voici une option utilisant des colonnes enveloppées, mais elle nécessite une hauteur fixe.

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

Une meilleure option pour la mise en page de la maçonnerie CSS est d'utiliser des colonnes, un exemple est sur ce billet 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%;
}
21
user2548213

L'enveloppe de boîte flexible enveloppe les éléments débordants dans une nouvelle rangée. Cette nouvelle ligne a, tout comme la ligne précédente, la hauteur de l'enfant flex le plus élevé. Il ne laissera pas les éléments de la ligne sortir des limites de cette ligne.

Donc, malheureusement, vous ne pouvez pas combler les écarts verticaux avec flexbox.

18
joerideg