Comment puis-je garantir une largeur égale pour tous les éléments d'une mise en page Flexbox ?

Flexbox : garantir une largeur égale pour tous les éléments

En tentant de créer une barre de navigation Flexbox réactive avec des quantités d'éléments variables, les développeurs peuvent rencontrer un problème où la répartition de la largeur entre les éléments est inégal. Cet article explore une solution à ce défi.

Contexte

Le didacticiel suivi utilisait initialement display:table pour obtenir une distribution de largeur égale, mais a rencontré des problèmes lors du passage à flexbox. Flexbox définit par défaut flex-basis sur auto, qui utilise la taille du contenu comme taille initiale pour chaque élément flexible. Par conséquent, les éléments avec une taille de contenu plus grande occupent plus d'espace.

Solution : Flex-basis à 0

Pour garantir une largeur égale pour tous les éléments, nous définissons flex-basis sur 0. Cela élimine l'initiale taille, laissant tout l'espace restant à répartir proportionnellement en fonction de flex-grow.

Exemple

Le code suivant L'extrait montre comment définir flex-basis sur 0 résout le problème :

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

Explication visuelle

Le diagramme ci-dessous de la spécification CSS Flexbox illustre le concept de flex-basis :

[Diagramme de la spécification CSS Flexbox]

Travail Exemple

Référencez le Fiddle modifié pour observer la distribution de largeur égale :

[Working Fiddle]

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!