Comment puis-je répartir la largeur uniformément entre les éléments Flexbox avec un contenu variable ?

Flexbox : répartir la largeur uniformément entre les éléments

Dans le but de créer une navigation flexbox avec un nombre variable d'éléments (entre 3 et 5) , vous avez rencontré un problème où la largeur n'était pas répartie de manière égale entre les éléments. Pour résoudre ce problème, il est crucial de comprendre « flex-basis ».

« flex-basis » est une propriété essentielle de flexbox qui définit essentiellement la taille initiale des éléments flex. Par défaut, il est défini sur « auto », ce qui signifie que la taille de l'élément flexible est déterminée par son contenu. Par conséquent, les éléments avec un contenu de texte plus volumineux occuperont naturellement plus d'espace.

Pour garantir une distribution égale, il est recommandé de définir "flex-basis" sur 0. Cela définit la taille initiale sur 0, et tout espace restant sera être distribué proportionnellement en fonction de "flex-grow".

Voici un extrait mis à jour de votre code avec "flex-basis" défini sur 0 :

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

Cet ajustement entraînera une répartition uniforme de la largeur entre vos éléments de navigation, quelle que soit la taille de leur contenu. Vous trouverez ci-dessous un exemple fonctionnel de démonstration : [lien vers le violon mis à jour]

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!