¿Cómo hacer que los artículos flexbox sean del mismo tamaño?

Quiero usar flexbox que tiene una cierta cantidad de elementos que son todos del mismo ancho. Me di cuenta de que flexbox distribuye el espacio de manera uniforme, en lugar del espacio en sí.

Por ejemplo:

.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>

El primer artículo es mucho más grande que el segundo. Si tengo 3 elementos, 4 elementos o n elementos, quiero que todos aparezcan en la misma línea con la misma cantidad de espacio por elemento.

¿Algunas ideas?

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

Configurarlos para que su flex-basises 0(por lo que todos los elementos tienen el mismo punto de partida), y les permiten crecer:

flex: 1 1 0px

Su IDE o linter podría mencionar eso the unit of measure 'px' is redundant. Si lo deja fuera (como flex: 1 1 0:), IE no lo procesará correctamente. Por lo tanto, pxes necesario para admitir Internet Explorer, como se menciona en los comentarios de @fabb;

Podrías agregar flex-basis: 100%para lograr esto.

Ejemplo actualizado

.header {
  display: flex;
}

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

Por lo que vale, también podría usarlo flex: 1para obtener los mismos resultados.

La abreviatura de flex: 1es la misma que flex: 1 1 0, que es equivalente a:

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

Debe agregar width: 0para hacer que las columnas sean iguales si el contenido de los elementos lo hace crecer más grande.

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

La respuesta aceptada por Adam (flex: 1 1 0 ) funciona perfectamente para contenedores flexbox cuyo ancho es fijo o determinado por un antepasado. Situaciones en las que desea que los niños encajen en el contenedor.

Sin embargo, puede tener una situación en la que desea que el contenedor se ajuste a los niños, con los niños del mismo tamaño en función del niño más grande. Puede hacer que un contenedor flexbox se ajuste a sus hijos de la siguiente manera:

• ajuste position: absolutey no ajuste widtho right, o
• colóquelo dentro de una envoltura con display: inline-block

Para tales contenedores flexbox, la respuesta aceptada NO funciona, los niños no tienen el mismo tamaño. Supongo que esta es una limitación de flexbox, ya que se comporta igual en Chrome, Firefox y Safari.

La solución es usar una cuadrícula en lugar de una caja flexible.

Demostración: 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;
}

No soy un experto en flex, pero llegué estableciendo la base al 50% para los dos elementos con los que estaba tratando. Crecer a 1 y reducir a 0.

Estilo en línea: flex: '1 0 50%',