Ensemble flexbox les enfants à avoir des hauteurs différentes pour l'utilisation de l'espace disponible
À l'aide de deux colonnes flexbox mise en page, comment taille les enfants être fait pour combler tout l'espace disponible, à la place de tous les enfants ayant de la hauteur de la plus haute enfant de la ligne?
J'ai mis en place une démo sur jsbin qui illustre bien le problème. J'aimerais que tous les enfants soient la taille de leur enveloppé contenu.
#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>
- C'est plus évident si vous regardez la démo. Avec arbitrairement longues de contenu dans les cellules, la hauteur de chaque cellule est égale à la hauteur de la plus haute de la cellule sur sa ligne. Je veux que chaque cellule pour avoir une hauteur égale à son propre contenu, de sorte que lorsqu'une cellule et un court de cellules de partager une ligne, le court de la cellule ne dispose pas d'un gros bloc d'espace blanc entre elle et la cellule dans la prochaine ligne
Vous devez vous connecter pour publier un commentaire.
C'est de cette façon Flexbox lignes sont tenus de se comporter. Flexbox n'est pas destiné à recréer la Maçonnerie avec la pure CSS: les éléments dans une rangée ne peut pas occuper l'espace alloué pour un précédent/suivant de la ligne (en va de même pour les colonnes si vous utilisez la colonne d'orientation). Vous pouvez utiliser alignez-les éléments afin de les empêcher de s'allonger, mais c'est à ce sujet:
http://cssdeck.com/labs/9s9rhrhl
Sinon, vous devriez être en utilisant la colonne de l'orientation ou de la multi-colonne de module (voir ce DONC réponse: https://stackoverflow.com/a/20862961/1652962)