Comment créer une grille Flexbox à deux lignes avec quatre éléments par ligne ?

Flexbox : Création d'une grille à deux lignes avec quatre éléments par ligne

Flexbox fournit un système de mise en page puissant pour créer des pages Web dynamiques et réactives . Un cas d'utilisation courant consiste à créer une disposition de type grille qui enveloppe et redimensionne automatiquement ses éléments à mesure que la taille de la fenêtre d'affichage change.

Le problème : regrouper les éléments dans plusieurs lignes

Dans votre scénario spécifique, vous êtes confronté à un problème où votre conteneur flexbox affiche huit éléments sur une seule ligne au lieu de les diviser en deux lignes de quatre éléments. chacun.

La solution : comprendre les propriétés de la Flexbox

Pour forcer les éléments à être divisés en deux lignes, nous devons ajuster deux propriétés de la flexbox : flex-wrap et flex-grow.

flex-wrap: wrap

Les contrôles de propriété flex-wrap si les éléments du conteneur peuvent être renvoyés pour former plusieurs lignes. En le définissant sur wrap, vous autorisez les éléments à circuler sur de nouvelles lignes selon les besoins.

flex-grow : 1

La propriété flex-grow contrôle la façon dont le les articles répartissent l’espace excédentaire dans le conteneur. Une valeur de 1 signifie que chaque élément grandira proportionnellement pour remplir l'espace disponible sur sa ligne.

Le problème : remplacement des valeurs par défaut

Dans votre code d'origine, flex -wrap était défini sur wrap, mais flex-grow était défini sur 1 sur les éléments flexibles. Cela a entraîné la croissance des éléments pour occuper toute la largeur disponible, les empêchant de s'enrouler.

La solution : définir la largeur de l'élément

Pour résoudre le problème, nous devons définissez une largeur spécifique pour les éléments afin qu'ils ne poussent pas trop et ne forcent pas l'emballage. Dans le code corrigé, nous avons utilisé la propriété flex avec trois valeurs :

1. flex: 1 0 21%; - La première valeur (1) définit le facteur de croissance de l'article à 1, ce qui équivaut à flex-grow : 1.
2. flex : 1 0 21% ; - La deuxième valeur (0) définit le facteur de rétrécissement de l'article sur 0, ce qui signifie qu'il ne rétrécira pas en dessous de sa largeur spécifiée.
3. flex : 1 0 21 % ; - La troisième valeur (21 %) définit la largeur initiale de l'article à 21 % de la largeur du conteneur.

En définissant la largeur de l'article, nous nous assurons qu'il s'enroule de manière appropriée en deux rangées de quatre articles chacune.

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!