Bagaimana cara membuat item flexbox dengan ukuran yang sama?

Saya ingin menggunakan flexbox yang memiliki beberapa item dengan lebar yang sama. Saya perhatikan bahwa flexbox mendistribusikan ruang sekitar secara merata, bukan ruang itu sendiri.

Sebagai contoh:

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

Item pertama jauh lebih besar daripada yang kedua. Jika saya memiliki 3 item, 4 item, atau n item, saya ingin semuanya muncul pada baris yang sama dengan jumlah ruang per item yang sama.

Ada ide?

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

Mengatur mereka sehingga mereka flex-basisadalah 0(sehingga semua elemen memiliki titik awal yang sama), dan memungkinkan mereka untuk tumbuh:

flex: 1 1 0px

IDE atau linter Anda mungkin menyebutkan itu the unit of measure 'px' is redundant. Jika Anda membiarkannya (seperti flex: 1 1 0:), IE tidak akan membuat ini dengan benar. Jadi pxdiperlukan untuk mendukung Internet Explorer, sebagaimana disebutkan dalam komentar oleh @fabb;

Anda dapat menambahkan flex-basis: 100%untuk mencapai ini.

Contoh yang Diperbarui

.header {
  display: flex;
}

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

Untuk apa nilainya, Anda juga bisa menggunakan flex: 1untuk hasil yang sama.

Singkatan dari flex: 1sama dengan flex: 1 1 0, yang setara dengan:

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

Anda perlu menambahkan width: 0untuk membuat kolom sama jika konten item membuatnya bertambah besar.

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

Jawaban yang diterima oleh Adam (flex: 1 1 0 ) bekerja dengan sempurna untuk wadah flexbox yang lebarnya ditetapkan, atau ditentukan oleh leluhur. Situasi di mana Anda ingin anak-anak sesuai dengan wadah.

Namun, Anda mungkin memiliki situasi di mana Anda ingin wadah tersebut cocok untuk anak-anak, dengan anak-anak berukuran sama berdasarkan anak terbesar. Anda dapat membuat wadah flexbox yang pas untuk anak-anaknya dengan:

• pengaturan position: absolutedan bukan pengaturan widthatau right, atau
• letakkan di dalam pembungkus display: inline-block

Untuk wadah flexbox seperti itu, jawaban yang diterima TIDAK bekerja, anak-anak tidak berukuran sama. Saya kira ini adalah batasan flexbox, karena berperilaku sama di Chrome, Firefox dan Safari.

Solusinya adalah dengan menggunakan kisi bukan 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;
}

Saya bukan ahli dengan flex tetapi saya sampai di sana dengan menetapkan basis menjadi 50% untuk dua item yang saya hadapi. Tumbuh menjadi 1 dan menyusut ke 0.

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