Comment rendre les éléments flexbox de la même taille?

Je veux utiliser flexbox qui a un certain nombre d'éléments qui ont tous la même largeur. J'ai remarqué que flexbox répartit l'espace 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;
}

<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

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

Des idées?

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

Définissez-les de manière à ce que leur flex-basissoit 0(pour que tous les éléments aient le même point de départ) et permettez-leur de grandir:

flex: 1 1 0px

Votre IDE ou linter pourrait le mentionner the unit of measure 'px' is redundant. Si vous l'omettez (comme flex: 1 1 0:), IE ne le rendra pas correctement. Il pxest donc nécessaire de prendre en charge Internet Explorer, comme mentionné dans les commentaires de @fabb;

Vous pourriez ajouter 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 ça vaut, vous pouvez également utiliser flex: 1pour les mêmes résultats.

Le raccourci de flex: 1est 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;
}

Vous devez ajouter width: 0pour rendre les colonnes égales si le contenu des éléments l'agrandit.

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

La réponse acceptée par Adam ( flex: 1 1 0) fonctionne parfaitement pour les conteneurs flexbox dont la largeur est soit fixe, soit déterminée par un ancêtre. Situations où vous voulez que les enfants rentrent dans le conteneur.

Cependant, vous pouvez avoir une situation où vous voulez que le conteneur s'adapte aux enfants, avec les enfants de taille égale en fonction du plus grand enfant. Vous pouvez adapter un conteneur flexbox à ses enfants en:

• réglage position: absoluteet non réglage widthou right, ou
• placez-le dans un emballage avec display: inline-block

Pour de tels conteneurs flexbox, la réponse acceptée ne fonctionne PAS , les enfants ne sont pas de taille égale. Je présume qu'il s'agit d'une limitation de la flexbox, car elle se comporte de la même manière dans Chrome, Firefox et Safari.

La solution est d'utiliser une grille au lieu d'une flexbox.

Démo: https://codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}

Je ne suis pas un expert en flex mais j'y suis arrivé en définissant la base à 50% pour les deux éléments dont je m'occupais. Passez à 1 et réduisez à 0.

Style en ligne: flex: '1 0 50%',