Pourquoi les éléments du conteneur Flex sont-ils alignés au centre au lieu d'être alignés à gauche lors de l'utilisation de « justifier-content : space-around » ?

Alignement des éléments du conteneur flexible à gauche

Dans un menu mobile, une liste d'icônes de médias sociaux est organisée à l'aide de flexbox. Pour garantir un espacement égal, justifier-contenu : espace-autour est utilisé. Cependant, lorsque les lignes contiennent plus de trois éléments, elles s'alignent au centre au lieu de s'aligner à gauche.

Le dilemme

Le problème se pose car justification-content: space- autour répartit uniformément les articles avec des espaces demi-taille à chaque extrémité. Lorsque l'espace restant est négatif ou qu'un seul élément existe, il se comporte comme le centre. Cela entraîne un comportement d'alignement central indésirable dans le scénario donné.

Solution

Pour aligner les éléments laissés sur l'emballage, justifier le contenu : l'espace entre est le répondre. Cette variation garantit une distribution uniforme, mais en cas d'espace libre négatif ou d'un seul élément dans la ligne, elle se comporte comme flex-start, qui aligne les éléments à gauche.

Exemple de code

Le remplacement de justification-contenu : espace-autour par justifier-contenu : espace-entre résout le problème d'alignement. De plus, des rembourrages gauche et droit peuvent être ajoutés au conteneur pour imiter l'effet d'espacement de l'espace autour.

Autres considérations

Un défi potentiel qui peut surgir est lorsque deux articles s'enroulent et s'alignent sur les extrémités opposées du conteneur. Cependant, résoudre ce problème est une tout autre affaire.

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!