Mencoba flexbox nav yang memiliki hingga 5 item dan hanya 3, tetapi tidak membagi lebar secara merata di antara semua elemen.

Biola

Tutorial yang saya modelkan setelah ini adalah http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

KELANCANGAN

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

Ada bagian penting yang tidak disebutkan dalam artikel yang Anda tautkan dan itu flex-basis. Secara default flex-basisadalah auto.

Dari spec :

Jika basis flex yang ditentukan adalah otomatis, basis flex yang digunakan adalah nilai dari properti ukuran utama item flex. (Ini sendiri dapat berupa kata kunci otomatis, yang mengukur item fleksibel berdasarkan kontennya.)

Setiap item fleksibel memiliki flex-basisyang seperti ukuran awal. Kemudian dari sana, setiap ruang kosong yang tersisa didistribusikan secara proporsional (berdasarkan flex-grow) di antara barang-barang. Dengan auto, dasar itu adalah ukuran isi (atau ukuran yang ditentukan dengan width, dll.). Akibatnya, item dengan teks yang lebih besar di dalamnya diberi lebih banyak ruang secara keseluruhan dalam contoh Anda.

Jika Anda ingin elemen Anda menjadi genap total, Anda dapat mengatur flex-basis: 0. Ini akan mengatur basis flex ke 0 dan kemudian setiap ruang yang tersisa (yang akan menjadi semua ruang karena semua basis adalah 0) akan didistribusikan secara proporsional berdasarkan flex-grow.

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

Diagram ini dari spec melakukan pekerjaan yang cukup baik dalam menggambarkan poin.

Dan di sini adalah contoh kerja dengan biola Anda.

Untuk membuat elemen dengan lebar yang sama menggunakan Flex, Anda harus mengatur ke anak Anda (elemen fleksibel):

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

Ini akan memberikan semua elemen di baris 25% lebar. Mereka tidak akan tumbuh dan pergi satu per satu.