web-dev-qa-db-fra.com

Définissez flexbox les enfants doivent avoir des hauteurs différentes pour utiliser l'espace disponible

En utilisant une disposition à deux colonnes flexbox, comment faire en sorte que des enfants de différentes tailles remplissent tout l'espace disponible, au lieu que tous les enfants aient la hauteur de l'enfant le plus grand de la ligne?

J'ai mis en place une démo sur jsbin 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>
csscss3flexbox
35
verysuperfresh

Voici comment les lignes Flexbox sont censées 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 précédente/ligne 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 devez utiliser l'orientation des colonnes ou le module multi-colonnes (voir cette réponse SO: https://stackoverflow.com/a/20862961/1652962 )

36
cimmanon