Pourquoi les éléments flexibles s'alignent-ils au centre plutôt qu'à gauche lors d'un retour à la ligne et comment y remédier ?

Éléments flexibles : aligner à gauche au lieu de centrer sur Wrap

Dans ce scénario, vous souhaitez afficher les icônes de réseaux sociaux en rangées de trois en utilisant Éléments ul basés sur Flex dans un menu mobile. L'alignement souhaité est côte à côte avec un espacement égal. Une fois le positionnement côte à côte effectué, le problème survient lorsque des icônes supplémentaires sont ajoutées, ce qui entraîne l'alignement de la ligne suivante à partir du centre plutôt que de la gauche.

Solution :

Pour corriger ce problème d'alignement, remplacez la règle justifier-contenu : espace-autour par justifier-contenu : espace-entre.

Explication :

Selon la spécification flexbox, justifier-contenu : espace-autour distribue les éléments flexibles uniformément le long de la ligne avec des espaces demi-taille à chaque extrémité. Cependant, lorsqu'il n'y a qu'un seul élément flexible ou un espace restant négatif, il se comporte de manière identique par rapport au centre, ce qui entraîne le comportement souhaité uniquement lorsqu'il y a trois éléments dans les deux lignes.

En revanche, justifiez-content: space -between répartit uniformément les éléments flexibles sans ajouter d'espaces d'extrémité supplémentaires. Lorsqu'il n'y a qu'un seul élément flexible ou un espace restant négatif, la valeur par défaut est flex-start, en alignant l'élément flexible à partir de la gauche.

En utilisant l'espace entre les deux, vos éléments flexibles s'aligneront toujours sur la gauche, garantissant ainsi le comportement souhaité pour les lignes à une seule ligne et les lignes enveloppées.

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!