Comment puis-je répartir uniformément des éléments de largeur inégale à l'aide de Flexbox ?

Flexbox distribuant une largeur inégale aux éléments

Problème :

Vous utilisez Flexbox pour créer une navigation horizontale avec un nombre variable d'articles (3-5), mais la largeur n'est pas répartie uniformément entre eux.

Analyse :

Flexbox définit par défaut la propriété flex-basis sur "auto", ce qui signifie que les éléments sont dimensionnés en fonction de leur contenu. Dans votre exemple, les éléments avec un contenu textuel plus volumineux occupent plus d'espace.

Solution :

Pour garantir une distribution égale, définissez flex-basis : 0. Cela définit le base de flexibilité initiale à zéro, permettant à l'espace restant d'être distribué proportionnellement en fonction de la croissance flexible. La valeur de flex-grow doit être définie pour garantir qu'ils se développent tous de manière égale.

Code :

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

Explication :

La valeur zéro pour flex-basis garantit que les éléments de navigation commencent avec la même taille, quel que soit le contenu. Ensuite, flex-grow de 1 les fait s'étendre de manière égale pour remplir l'espace restant.

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!