Jak sprawić, by elementy Flexbox miały ten sam rozmiar?

Chcę użyć flexbox, który ma pewną liczbę elementów o tej samej szerokości. Zauważyłem, że flexbox rozdziela przestrzeń równomiernie, a nie samą przestrzeń.

Na przykład:

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

Pierwsza pozycja jest dużo większa niż druga. Jeśli mam 3 elementy, 4 elementy lub n elementów, chcę, aby wszystkie pojawiały się w tym samym wierszu z jednakową ilością miejsca na element.

Jakieś pomysły?

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

Ustaw je tak, że ich flex-basisjest 0(tak, wszystkie elementy mają ten sam punkt początkowy) i pozwolić im się rozwijać:

flex: 1 1 0px

Twoje IDE lub linter mogą o tym wspomnieć the unit of measure 'px' is redundant. Jeśli go pominiesz (na przykład flex: 1 1 0:), IE nie wyrenderuje tego poprawnie. Tak więc pxwymagana jest obsługa przeglądarki Internet Explorer, jak wspomniano w komentarzach @fabb;

Możesz dodać, flex-basis: 100%aby to osiągnąć.

Zaktualizowany przykład

.header {
  display: flex;
}

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

Za to, co jest warte, możesz również użyć flex: 1dla tych samych wyników.

Skrót od flex: 1jest taki sam jak flex: 1 1 0, co jest równoważne z:

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

Musisz dodać, width: 0aby kolumny były równe, jeśli zawartość elementów powoduje, że rosną.

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

Zaakceptowana odpowiedź Adama ( flex: 1 1 0) działa doskonale w przypadku kontenerów typu flexbox, których szerokość jest stała lub określona przez przodka. Sytuacje, w których chcesz, aby dzieci pasowały do ​​pojemnika.

Może się jednak zdarzyć, że chcesz, aby pojemnik pasował do dzieci, a dzieci powinny mieć równe rozmiary w oparciu o największe dziecko. Możesz dopasować kontener typu flexbox do swoich elementów podrzędnych:

• ustawienie, position: absolutea nie ustawienie widthlub right, lub
• umieść go w opakowaniu z display: inline-block

W przypadku takich pojemników typu flexbox przyjęta odpowiedź NIE działa, dzieci nie mają równych rozmiarów. Przypuszczam, że jest to ograniczenie flexboksa, ponieważ zachowuje się tak samo w Chrome, Firefox i Safari.

Rozwiązaniem jest użycie siatki zamiast flexboksa.

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

Nie jestem ekspertem w dziedzinie flex, ale osiągnąłem to, ustawiając podstawę na 50% dla dwóch rzeczy, z którymi miałem do czynienia. Rosną do 1 i zmniejszają się do 0.

Stylizacja inline: flex: '1 0 50%',