Comment puis-je regrouper les éléments Flexbox sur plusieurs lignes tout en conservant un dimensionnement proportionnel ?

Flexbox : afficher des éléments sur plusieurs lignes

Dans flexbox, réaliser une mise en page avec plusieurs lignes peut être un défi. Prenons un scénario dans lequel huit éléments devraient être redimensionnés et alignés dynamiquement sur deux lignes, avec quatre éléments par ligne. Pour résoudre ce problème, quelques ajustements clés sont nécessaires.

Tout d'abord, assurez-vous que flex-wrap est configuré pour s'enrouler sur l'élément conteneur. Cela remplace le paramètre nowrap par défaut, permettant aux éléments de se diviser en plusieurs lignes.

Cependant, le principal obstacle réside dans la propriété flex-grow: 1 attribuée aux éléments flexibles. Bien que cette propriété distribue l'espace disponible proportionnellement, elle peut gêner l'emballage. Puisqu'il n'y a pas de contenu dans les éléments flexibles, ils seront réduits à une largeur nulle et resteront sur une seule ligne.

La solution consiste à spécifier une largeur pour les éléments. En appliquant flex : 1 0 21 % ;, les éléments :

• Flex : 1 - Les éléments flexibles se plieront pour remplir l'espace disponible.
• 0 - Les éléments flexibles auront une largeur minimale de zéro, leur permettant de rétrécir.
• 21 % - Les articles flexibles auront une largeur préférée de 21 %, garantissant qu'ils s'adaptent au contenu et se répartissent uniformément dans le conteneur.

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!