Définissez les enfants flexbox à différentes hauteurs pour utiliser l'espace disponible
En utilisant une disposition flexbox à deux colonnes, comment peut-on faire des enfants de différentes tailles pour remplir tout l'espace disponible, au lieu que tous les enfants aient la taille de l'enfant le plus haut de la rangée?
J'ai mis en place une démo sur jsbin {[5] } qui illustre le problème. J'aimerais que tous les enfants aient la taille de leur contenu emballé.
#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>
1 réponses
Voici comment les lignes Flexbox doivent se comporter. Flexbox n'est pas destiné à recréer la maçonnerie avec du CSS pur: les éléments d'une ligne ne peuvent pas occuper l'espace alloué pour une ligne précédente/suivante (il en va de même pour les colonnes si vous utilisez l'orientation des colonnes). Vous pouvez utiliser align-items pour les empêcher de s'étirer, mais c'est à peu près tout:
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;
}
Sinon, vous devriez utiliser l'orientation des colonnes ou le module multi-colonnes (voir ceci SO réponse: https://stackoverflow.com/a/20862961/1652962)