Como tornar os itens flexbox do mesmo tamanho?

Eu quero usar o flexbox que possui algum número de itens com a mesma largura. Percebi que o flexbox distribui o espaço uniformemente, e não o próprio espaço.

Por exemplo:

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

O primeiro item é muito maior que o segundo. Se eu tiver 3 itens, 4 itens ou n itens, desejo que todos apareçam na mesma linha com uma quantidade igual de espaço por item.

Alguma ideia?

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

Defina-os de forma que flex-basissejam 0(para que todos os elementos tenham o mesmo ponto de partida) e permita que eles cresçam:

flex: 1 1 0px

Seu IDE ou linter podem mencionar isso the unit of measure 'px' is redundant. Se você deixar de fora (como flex: 1 1 0:), o IE não renderizará isso corretamente. Portanto, pxé necessário dar suporte ao Internet Explorer, conforme mencionado nos comentários do @fabb;

Você pode adicionar flex-basis: 100%para conseguir isso.

Exemplo atualizado

.header {
  display: flex;
}

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

Pelo que vale, você também pode usar flex: 1os mesmos resultados.

A abreviação de flex: 1é igual a flex: 1 1 0, que é equivalente a:

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

Você precisa adicionar width: 0para tornar as colunas iguais se o conteúdo dos itens aumentar.

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

A resposta aceita por Adam ( flex: 1 1 0) funciona perfeitamente para contêineres flexbox cuja largura é fixa ou determinada por um ancestral. Situações em que você deseja que as crianças encaixem no recipiente.

No entanto, você pode ter uma situação em que deseja que o contêiner caiba nas crianças, com as crianças do mesmo tamanho com base na criança maior. Você pode fazer com que um contêiner flexbox se adapte a seus filhos:

• configuração position: absolutee não configuração widthou right, ou
• coloque-o dentro de um invólucro com display: inline-block

Para esses recipientes flexbox, a resposta aceita NÃO funciona, as crianças não têm o mesmo tamanho. Presumo que essa seja uma limitação do flexbox, pois se comporta da mesma maneira no Chrome, Firefox e Safari.

A solução é usar uma grade em vez de uma caixa flexível.

Demonstração: 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;
}

Não sou especialista em flex, mas cheguei lá definindo a base para 50% para os dois itens com os quais estava lidando. Aumente para 1 e diminua para 0.

Estilo embutido: flex: '1 0 50%',