Comment puis-je faire en sorte que les enfants Flexbox utilisent l'espace disponible pour des hauteurs séparées ?

S'assurer que les enfants Flexbox utilisent l'espace disponible pour des hauteurs séparées

Question :

Dans une disposition flexbox à deux colonnes, comment des éléments de différentes tailles peuvent-ils être répartis pour remplir toute la zone accessible plutôt que d'avoir la même hauteur que le plus haut element?

Contexte :

En utilisant la propriété flex-wrap de flexbox, nous pouvons envelopper des éléments sur plusieurs lignes. Cependant, par défaut, tous les éléments d'une ligne ont tendance à avoir la même hauteur que l'élément le plus haut de cette ligne. Cela peut être indésirable si l'on souhaite que les éléments conservent leur hauteur naturelle.

Exemple :

Considérez le code suivant :

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex: 1 auto;
}

Réponse :

Flexbox implique, de par sa conception, que les lignes se comportent comme décrit au-dessus de. Flexbox n'a pas l'intention d'imiter les dispositions de style maçonnerie dans lesquelles les éléments de rangée peuvent s'étendre dans l'espace des rangées voisines. Il existe des options limitées pour ajuster la hauteur des éléments à l'aide d'align-items :

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

Comme alternative, envisagez d'utiliser l'orientation des colonnes ou d'explorer le module multi-colonnes pour plus d'options de personnalisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!