En fazla 5 öğe ve en az 3 öğe içeren bir flexbox nav deneniyor, ancak genişliği tüm öğeler arasında eşit olarak bölmüyor.

Vaktini boşa harcamak

Bundan sonra modellediğim öğretici http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SUKDÖ

* {
  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>

Bağlantı verdiğiniz makalede belirtilmeyen önemli bir şey var flex-basis. Varsayılan flex-basisolarak auto.

Gönderen spec :

Belirtilen esnek temel otomatikse, kullanılan esnek temel esnek öğenin ana boyut özelliğinin değeridir. (Bu, flex öğesini içeriğine göre boyutlandıran otomatik anahtar kelimesi olabilir.)

Her esnek öğenin flex-basisbaşlangıç ​​boyutuna benzeyen bir öğesi vardır . Daha sonra oradan kalan boş alan, flex-growöğeler arasında orantılı olarak (dayalı olarak ) dağıtılır . Bu autotemelde içerik boyutu (veya ile tanımlanan boyut width, vb.). Sonuç olarak, içinde daha büyük metin bulunan öğelere, örneğinizde genel olarak daha fazla yer verilir.

Elemanlarınızın tamamen eşit olmasını istiyorsanız, ayarlayabilirsiniz flex-basis: 0. Bu, esnek temeli 0 olarak ayarlayacak ve daha sonra kalan tüm boşluklar (tüm temeller 0 olduğu için tüm alan olacaktır) orantılı olarak dağıtılacaktır flex-grow.

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

Spec bu diyagramı , noktayı göstermek için oldukça iyi bir iş çıkarır.

Ve işte kemanınızla çalışan bir örnek .

Kullanarak eşit genişliğe sahip öğeler oluşturmak Flexiçin, çocuğunuza (esnek öğeler) ayarlamanız gerekir:

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

Satırdaki tüm öğelere% 25 genişlik verecektir. Büyümeyecek ve tek tek gitmeyecekler.