Répartition proportionnelle de l'espace pour tous les items

Sans taille flexible

Version avec conteneur en display:flex mais propriété flex des items non modifiée, pour comparer :

• Premier
• C'est mon deuxième item qui est vraiment long
• Troisième
• C'est mon quatrième item
• Cinquième

• 1
• 2
• 3
• 4
• 5

Avec taille flexible

Tous les items sont en flex:1. Ils se répartissent l'espace supplémentaire de manière équitable. Redimensionner la fenêtre !

• Premier
• C'est mon deuxième item qui est vraiment long
• Troisième
• C'est mon quatrième item
• Cinquième

• 1
• 2
• 3
• 4
• 5

Pièges

L'espace disponible est ajouté au contenu des items. Les paddings et bordures faussent la proportionnalité. Exemple identique au précédent mais où le premier item a une grosse bordure :

• 1
• 2
• 3
• 4
• 5

Il est beaucoup plus gros que les autres, alors qu'il a la même valeur de flex (et box-sizing:border-box n'y change rien). Solution, si vraiment besoin d'éviter ça : ajouter une boîte « intermédiaire », sans padding ni bordure, dans les flex items :

• 1
• 2
• 3
• 4
• 5

S'il y a suffisamment d'espace sur la ligne (dézoomer si besoin), tous les items devraient avoir la même largeur. (Évidemment il faudrait déstyler les li pour obtenir l'effet voulu, je laisse comme ça pour que ce que j'ai fait soit plus visible.)

Autre piège : s'il n'y a pas assez d'espace, la largeur des items va dépendre de leur contenu. Il n'y a aucune garantie de proportionnalité dans toutes les situations. Vérifier ce qui se passe en redimensionnant la fenêtre (surtout dans la section précédente).