Comment puis-je corriger les largeurs inégales dans la navigation de ma Flexbox ?

Dépannage de Flexbox pour des largeurs d'éléments inégales

Lors de la création d'une disposition de navigation flexbox, il est crucial d'obtenir une répartition uniforme de la largeur entre les éléments. Cependant, vous pouvez parfois rencontrer des problèmes liés à la taille variable des éléments. Cela peut être dû à l'influence de flex-basis, une propriété qui définit la taille initiale des éléments flex.

Flex-Basis par défaut

Par défaut, flex-basis est défini sur auto, ce qui signifie que la taille initiale de l'élément flexible est déterminée par la taille de son contenu. Dans votre exemple, les éléments avec plus de contenu textuel recevront plus d'espace car leur base flexible est plus grande.

Régler Flex-Basis sur zéro

Pour garantir une distribution de largeur égale, vous pouvez définir flex-Basis. base à 0 pour tous les éléments. Cela réinitialisera leurs tailles initiales, permettant à tout espace restant d'être divisé proportionnellement en fonction de flex-grow, qui est défini sur 1 par défaut. Voici le code mis à jour :

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

Example Fiddle

Cet ajustement de code conduit au résultat souhaité, où tous les éléments de votre navigation flexbox ont des largeurs égales :

[Mise à jour Fiddle](https://fiddle.jshell.net/h2db4yxw/11/)

Visualisation

Le diagramme suivant de la spécification flexbox illustre le concept de flex-basis et son impact sur l'élément dimensionnement :

[Diagramme de la base flexible de la flexbox spécification](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property)

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!