Comment répartir équitablement l'espace disponible chez les enfants Flexbox de différentes hauteurs ?

Remplir l'espace disponible dans Flexbox pour les enfants de tailles variables

Problème :

Dans deux -disposition flexbox en colonnes, les enfants de tailles différentes ont tendance à s'aligner sur la taille de l'enfant le plus grand. Comment répartir l'espace disponible de manière égale entre les enfants, quel que soit leur contenu ?

Solution :

Par défaut, les rangées de flexbox répartissent l'espace de manière égale entre les enfants en les étirant verticalement . Pour éviter cela et permettre aux enfants d'occuper de l'espace en fonction de leur contenu, nous pouvons définir la propriété align-items sur flex-start :

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

Explication :

Définition des éléments d'alignement : flex-start aligne les enfants sur le bord supérieur du conteneur, leur permettant de remplir l'espace disponible verticalement en fonction de leur propre contenu. De cette façon, chaque enfant occupe un espace proportionnel à son contenu, plutôt que de correspondre à la taille de l'enfant le plus grand de la rangée.

Remarque :

Il est important de noter que flex-start n'affectera que l'alignement vertical des enfants dans la rangée. La propriété flex-wrap continuera à envelopper les lignes si nécessaire pour s'adapter à l'espace disponible.

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!