Come rendere gli articoli flexbox delle stesse dimensioni?

Voglio usare la flexbox che ha un certo numero di elementi che hanno tutti la stessa larghezza. Ho notato che flexbox distribuisce lo spazio uniformemente, piuttosto che lo spazio stesso.

Per esempio:

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

Il primo oggetto è molto più grande del secondo. Se ho 3 articoli, 4 articoli o n articoli, voglio che vengano visualizzati tutti sulla stessa riga con lo stesso spazio per articolo.

Qualche idea?

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

Impostali in modo che flex-basissiano 0(quindi tutti gli elementi hanno lo stesso punto di partenza) e consenti loro di crescere:

flex: 1 1 0px

Il tuo IDE o linter potrebbe menzionarlo the unit of measure 'px' is redundant. Se lo lasci fuori (come flex: 1 1 0:), IE non lo renderà correttamente. Quindi pxè necessario per supportare Internet Explorer, come menzionato nei commenti di @fabb;

Puoi aggiungere flex-basis: 100%per raggiungere questo obiettivo.

Esempio aggiornato

.header {
  display: flex;
}

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

Per quello che vale, puoi anche usare flex: 1gli stessi risultati.

La scorciatoia di flex: 1è la stessa di flex: 1 1 0, che equivale a:

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

È necessario aggiungere width: 0per rendere uguali le colonne se il contenuto degli elementi aumenta.

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

La risposta accettata da Adam (flex: 1 1 0 ) funziona perfettamente per i contenitori flexbox la cui larghezza è fissa o determinata da un antenato. Situazioni in cui si desidera che i bambini si adattino al contenitore.

Tuttavia, potresti avere una situazione in cui desideri che il contenitore si adatti ai bambini, con i bambini di dimensioni uguali in base al bambino più grande. Puoi rendere un contenitore flexbox adatto ai suoi figli:

• impostazione position: absolutee non impostazione widtho right, o
• metterlo all'interno di un involucro con display: inline-block

Per tali contenitori flexbox, la risposta accettata NON funziona, i bambini non hanno le stesse dimensioni. Presumo che questa sia una limitazione di flexbox, dal momento che si comporta allo stesso modo in Chrome, Firefox e Safari.

La soluzione è utilizzare una griglia anziché una flexbox.

Demo: 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;
}

Non sono un esperto di flex, ma ci sono arrivato impostando la base al 50% per i due articoli con cui avevo a che fare. Passa a 1 e riduci a 0.

Stile in linea: flex: '1 0 50%',