Tenter une navigation flexbox contenant jusqu'à 5 éléments et aussi peu que 3, mais cela ne divise pas la largeur également entre tous les éléments.

Violon

Le tutoriel que je modélise après est http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

TOUPET

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

Il y a un élément important qui n'est pas mentionné dans l'article auquel vous vous êtes lié et c'est le cas flex-basis. Par défaut, flex-basisc'est auto.

De la spécification :

Si la base flexible spécifiée est auto, la base flexible utilisée est la valeur de la propriété de taille principale de l'élément flexible. (Il peut s'agir du mot-clé auto, qui dimensionne l'élément flexible en fonction de son contenu.)

Chaque élément flexible a un flex-basisqui ressemble à sa taille initiale. Ensuite, à partir de là, tout espace libre restant est réparti proportionnellement (sur la base de flex-grow) entre les éléments. Avec auto, cette base est la taille du contenu (ou la taille définie avec width, etc.). Par conséquent, les éléments contenant un texte plus volumineux reçoivent globalement plus d'espace dans votre exemple.

Si vous souhaitez que vos éléments soient complètement uniformes, vous pouvez définir flex-basis: 0. Cela mettra la base flexible à 0, puis tout espace restant (qui sera tout l'espace puisque toutes les bases sont à 0) sera réparti proportionnellement en fonction de flex-grow.

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

Ce diagramme de la spécification illustre très bien le point.

Et voici un exemple de travail avec votre violon.

Pour créer des éléments de largeur égale à l'aide de Flex, vous devez définir sur l'enfant de votre (éléments flex):

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

Il donnera à tous les éléments de la ligne une largeur de 25%. Ils ne grandiront pas et iront un par un.