Comment puis-je utiliser Flexbox pour garantir 4 éléments par ligne ?

Flexbox : appliquer 4 éléments par ligne

Dans le domaine du design réactif, flexbox fournit un outil puissant pour disposer les éléments. Cependant, il n'est pas toujours simple d'obtenir des mises en page spécifiques, comme imposer un nombre fixe d'éléments par ligne.

Comprendre le problème

Comme décrit dans la requête d'origine, l'objectif est d'afficher 8 éléments dans un conteneur flexbox tout en conservant une disposition cohérente de 4 éléments par ligne. Par défaut, flexbox répartira les éléments de manière égale sur l'espace disponible, ce qui entraînera souvent des lignes inégales lorsque le nombre d'éléments dépasse la largeur souhaitée.

Solution : remplacer Flex-Grow

Dans ce scénario, le problème vient de la propriété flex-grow appliquée aux éléments flexibles individuels. Flex-grow demande aux éléments de se développer proportionnellement pour occuper n'importe quel espace disponible. Cependant, comme les éléments n'ont pas de largeur définie, ils rétrécissent continuellement jusqu'à zéro et ne s'enroulent jamais.

La clé pour imposer un nombre spécifique d'éléments par ligne est de définir une largeur sur les éléments flexibles. En définissant une largeur fixe, chaque élément occupe un espace prédéterminé, les obligeant à s'enrouler lorsque l'espace disponible est dépassé.

Implémentation

Le code CSS suivant montre comment garantir que 8 éléments sont affichés en 2 rangées de 4 :

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

• Flex : 1 0 21%; - Cette propriété de raccourci flexible :

  • 1 : Ordonne aux éléments de croître (s'il y a de l'espace disponible) proportionnellement à cette valeur.
  • 0 : Définit la largeur minimale de l'élément pour l'empêcher de rétrécissement.
  • 21 : Définit la largeur des éléments individuels comme 21 % de la largeur du conteneur parent. En fonction de la valeur flex, cela garantit que 4 éléments tiendront sur chaque ligne.
• Flex-wrap: wrap; - Permet aux éléments d'être renvoyés à la ligne suivante lorsque la largeur du conteneur est insuffisante.

Conclusion

En définissant une largeur fixe pour les éléments flexibles et en activant l'emballage flexible, il devient possible d'appliquer un nombre spécifique d'éléments par ligne dans une disposition flexbox. Cette technique offre aux concepteurs un plus grand contrôle sur la réactivité et la mise en page de leurs éléments Web.

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!