วิธีทำให้ flexbox มีขนาดเท่ากัน?

ฉันต้องการใช้ flexbox ที่มีจำนวนรายการที่มีความกว้างเท่ากันทั้งหมด ฉันสังเกตว่าเฟล็กบ็อกซ์กระจายพื้นที่รอบ ๆ อย่างสม่ำเสมอมากกว่าพื้นที่

ตัวอย่างเช่น:

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

รายการแรกมีขนาดใหญ่กว่าชิ้นที่สองมาก ถ้าฉันมี 3 รายการ 4 รายการหรือ n รายการฉันต้องการให้พวกเขาทั้งหมดปรากฏในบรรทัดเดียวกันด้วยจำนวนช่องว่างต่อรายการเท่ากัน

ความคิดใด ๆ

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

ตั้งค่าให้flex-basisเป็น0(องค์ประกอบทั้งหมดมีจุดเริ่มต้นเหมือนกัน) และอนุญาตให้เติบโต:

flex: 1 1 0px

IDE หรือ linter ของคุณอาจพูดถึงสิ่งthe unit of measure 'px' is redundantนั้น หากคุณปล่อยไว้ (เช่นflex: 1 1 0:) IE จะแสดงผลไม่ถูกต้อง ดังนั้นpxจำเป็นต้องมีการสนับสนุน Internet Explorer ตามที่ระบุไว้ในความคิดเห็นโดย @fabb;

คุณสามารถเพิ่มflex-basis: 100%เพื่อให้บรรลุสิ่งนี้

อัปเดตตัวอย่าง

.header {
  display: flex;
}

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

สำหรับสิ่งที่คุ้มค่าคุณสามารถใช้flex: 1เพื่อผลลัพธ์เดียวกันได้เช่นกัน

การจดชวเลขflex: 1เหมือนกันflex: 1 1 0ซึ่งเทียบเท่ากับ:

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

คุณต้องเพิ่มwidth: 0เพื่อทำให้คอลัมน์เท่ากันถ้าเนื้อหาของรายการทำให้ใหญ่ขึ้น

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

คำตอบที่ยอมรับโดย Adam (flex: 1 1 0 ) ทำงานได้อย่างสมบูรณ์แบบสำหรับบรรจุภัณฑ์แบบเฟล็กบ็อกซ์ที่มีความกว้างคงที่หรือกำหนดโดยบรรพบุรุษ สถานการณ์ที่คุณต้องการให้เด็ก ๆ พอดีกับภาชนะ

อย่างไรก็ตามคุณอาจมีสถานการณ์ที่คุณต้องการให้ภาชนะบรรจุพอดีกับเด็กโดยที่เด็ก ๆ จะมีขนาดเท่ากันตามขนาดของเด็กที่ใหญ่ที่สุด คุณสามารถสร้างคอนเทนเนอร์ flexbox ให้เหมาะกับลูกของมันได้โดย:

• การตั้งค่าposition: absoluteและไม่ได้ตั้งค่าwidthหรือrightหรือ
• วางไว้ในเสื้อคลุมด้วย display: inline-block

สำหรับคอนเทนเนอร์ flexbox ดังกล่าวคำตอบที่ยอมรับไม่ทำงานเด็ก ๆ จะมีขนาดไม่เท่ากัน ฉันคิดว่านี่เป็นข้อ จำกัด ของ flexbox เนื่องจากมันทำงานเหมือนกันใน Chrome, Firefox และ Safari

การแก้ปัญหาคือการใช้กริดแทน flexbox

การสาธิต: 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;
}

ฉันไม่มีความเชี่ยวชาญในการยืดหยุ่น แต่ฉันไปถึงที่นั่นด้วยการตั้งค่าพื้นฐานเป็น 50% สำหรับสองรายการที่ฉันติดต่อด้วย เพิ่มเป็น 1 และลดขนาดเป็น 0

สไตล์อินไลน์: flex: '1 0 50%',