Tentativo di un navigatore flexbox con un massimo di 5 elementi e un minimo di 3, ma non sta dividendo la larghezza equamente tra tutti gli elementi.

Violino

Il tutorial che sto modellando questo dopo è 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>

C'è un aspetto importante che non è menzionato nell'articolo a cui ti sei collegato e cioè flex-basis. Di default flex-basisè auto.

Dalle specifiche :

Se la base flessibile specificata è automatica, la base flessibile utilizzata è il valore della proprietà della dimensione principale dell'articolo flessibile. (Questa può essere essa stessa la parola chiave auto, che dimensiona l'elemento flessibile in base al suo contenuto.)

Ogni articolo flessibile ha una flex-basissorta di come la sua dimensione iniziale. Quindi da lì, ogni spazio libero rimanente viene distribuito in modo proporzionale (basato su flex-grow) tra gli elementi. Con auto, quella base è la dimensione del contenuto (o dimensione definita con width, ecc.). Di conseguenza, nel tuo esempio viene dato più spazio complessivo agli elementi con testo più grande all'interno.

Se vuoi che i tuoi elementi siano completamente uniformi, puoi impostare flex-basis: 0. Ciò imposterà la base flessibile su 0 e quindi qualsiasi spazio rimanente (che sarà tutto lo spazio poiché tutte le basi sono 0) verrà distribuito proporzionalmente in base a flex-grow.

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

Questo diagramma delle specifiche fa un ottimo lavoro per illustrare il punto.

Ed ecco un esempio funzionante con il tuo violino.

Per creare elementi con uguale larghezza usando Flex, dovresti impostare il figlio del tuo (elementi flessibili):

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

Darà a tutti gli elementi nella riga il 25% di larghezza. Non cresceranno e andranno uno per uno.