Alignement des éléments du conteneur flexible à gauche

Dans un menu mobile, une liste d'icônes de réseaux 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 sont alignées au centre au lieu d'être alignées à gauche.

Le dilemme

Le problème se pose car 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 à l'emballage, justifier le contenu : l'espace entre les deux 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-content: 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.

Considérations supplémentaires

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.