Comment puis-je forcer les éléments Flexbox sur deux lignes spécifiques ?

Flexbox : affichage des éléments sur deux lignes

Dans Flexbox, vous pouvez facilement répartir les éléments sur plusieurs lignes en définissant flex-wrap : wrap sur le conteneur. Cependant, pour forcer des éléments dans des lignes spécifiques, vous devez contrôler la taille et l'espacement des éléments.

Le problème du redimensionnement dynamique des éléments

Dans le code fourni, vous avez huit éléments avec flex -grow : 1, ce qui signifie que chaque élément essaiera d'occuper autant d'espace disponible que possible. Cela peut gêner la disposition souhaitée sur deux lignes.

Solution : Contrôler la largeur des éléments

Pour créer deux lignes de quatre éléments chacune, vous devez définir une largeur fixe pour les éléments enfants. Modifiez les styles enfants comme suit :

.child {
  flex: 1 0 21%; /* Adjust the percentage as needed */
}

• flex : 1 0 21 % :

  • 1 : définit la croissance flexible sur 1, autorisant les éléments to grow
  • 0 : définit le flex-shrink sur 0, empêchant les éléments de rétrécir au-delà des 21 % width
  • 21 % : Spécifie la largeur initiale de chaque élément (vous devrez peut-être ajuster légèrement cette valeur)

Avec les largeurs d'emballage flexible et d'élément défini, vos articles s'aligneront désormais parfaitement sur deux rangées de quatre.

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!