Comment faire des articles Flexbox de la même taille?

Je veux utiliser la flexbox qui comporte un certain nombre d’éléments de même largeur. J’ai remarqué que flexbox dissortingbue l’espace autour de manière uniforme, plutôt que l’espace lui-même.

Par exemple:

.header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } 
 
asdfasdfasdfasdfasdfasdf
z

Le premier élément est beaucoup plus gros que le second. Si j’ai 3 objects, 4 objects ou n objects, je souhaite qu’ils apparaissent tous sur la même ligne avec une quantité égale d’espace par object.

Des idées?

http://codepen.io/anon/pen/gbJBqM

Définissez-les de manière à ce que leur flex-basis soit égale à 0 (tous les éléments ont donc le même sharepoint départ) et leur permettent de croître:

flex: 1 1 0

Vous pouvez append la flex-basis: 100% pour y parvenir.

Exemple mis à jour

 .header { display: flex; } .item { flex-basis: 100%; text-align: center; border: 1px solid black; } 

Pour ce que cela vaut, vous pouvez également utiliser flex: 1 pour les mêmes résultats.

Le raccourci de flex: 1 est le même que flex: 1 1 0 , ce qui équivaut à:

 .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0; text-align: center; border: 1px solid black; } 

Ajouter de la largeur: 0 m’a aidé à résoudre le problème

 .item { flex-grow: 1 1 0; width: 0; } 

Voici le lien qui m’aide à résoudre mon problème: Toujours les colonnes flexbox égales