ความพยายามในการนำทาง flexbox ที่มีมากถึง 5 รายการและน้อยที่สุดเท่าที่ 3 แต่จะไม่แบ่งความกว้างเท่ากันระหว่างองค์ประกอบทั้งหมด

ซอ

บทช่วยสอนที่ฉันสร้างแบบจำลองนี้หลังจากนั้นคือhttp://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

flex-basisมีบิตที่สำคัญที่ไม่ได้กล่าวถึงในบทความที่คุณเชื่อมโยงและนั่นคือเป็น โดยค่าเริ่มต้นคือ flex-basisauto

จากสเป็ค :

หาก flex-basis ที่ระบุเป็น auto, flex พื้นฐานที่ใช้คือค่าของคุณสมบัติขนาดหลักของรายการ flex (ซึ่งอาจเป็นคำหลักอัตโนมัติซึ่งปรับขนาดรายการ flex ตามเนื้อหาของมัน)

แต่ละไอเท็มเฟล็กมีขนาดflex-basisที่เหมือนกับขนาดเริ่มต้น จากนั้นจะมีการกระจายพื้นที่ว่างที่เหลือตามสัดส่วน (ตามflex-grow) ระหว่างรายการ ด้วยautoพื้นฐานนั้นคือขนาดเนื้อหา (หรือขนาดที่กำหนดด้วยwidthฯลฯ ) ดังนั้นรายการที่มีข้อความที่ใหญ่กว่าจะได้รับพื้นที่โดยรวมในตัวอย่างของคุณมากขึ้น

หากคุณต้องการให้องค์ประกอบของคุณสมบูรณ์แม้คุณสามารถตั้งค่าflex-basis: 0ได้ นี้จะกำหนดพื้นฐานดิ้นถึง 0 แล้วพื้นที่ที่เหลืออยู่ (ซึ่งจะมีพื้นที่ทั้งหมดตั้งแต่ basises ทั้งหมดเป็น 0) flex-growจะถูกกระจายสัดส่วนอยู่บนพื้นฐานของ

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

ไดอะแกรมจากสเป็คนี้ทำได้ค่อนข้างดีในการแสดงจุด

และนี่คือตัวอย่างการทำงานของซอของคุณ

ในการสร้างองค์ประกอบที่มีความกว้างเท่ากันโดยใช้Flexคุณควรตั้งค่าเป็นลูกของคุณ (องค์ประกอบที่ยืดหยุ่น):

flex-basis: 25%;
flex-grow: 0;

มันจะมอบให้กับองค์ประกอบทั้งหมดในความกว้าง 25% ของแถว พวกเขาจะไม่เติบโตและไปทีละคน