Pourquoi mes éléments Flexbox ne sont-ils pas emballés correctement ?

Dépannage de l'emballage flexible des éléments

Lors de la création de plusieurs rangées d'éléments de même hauteur à l'aide de flexbox, il est courant de rencontrer des problèmes avec des éléments qui ne s'emballent pas correctement . Cela se produit car le comportement par défaut des conteneurs flexibles est d'empêcher l'emballage (flex-wrap : nowrap).

Pour activer l'emballage, définissez flex-wrap pour envelopper :

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

Comprendre les propriétés du conteneur Flex :

• afficher : flex: Initialise un élément en tant que conteneur flexible, en alignant les éléments sur une seule ligne ou colonne.
• flex-wrap: wrap: Permet aux éléments d'être enveloppés dans le conteneur.
• flex-wrap : nowrap : Empêche les objets de s'emballer, les confinant dans un seul ligne.

Exemple :

Considérons l'exemple suivant pour créer trois rangées de trois carrés de même hauteur :

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

#list-wrapper div {}

#list-wrapper div img {
  height: 150px;
  width: 150px;
}

<div>

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!