Tentativa de uma navegação flexbox com até 5 itens e menos de 3, mas não está dividindo a largura igualmente entre todos os elementos.

Violino

O tutorial que estou modelando é o seguinte: 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>

Há uma parte importante que não é mencionada no artigo ao qual você vinculou e é isso flex-basis. Por padrão flex-basisé auto.

Das especificações :

Se a base flexível especificada for automática, a base flexível usada será o valor da propriedade de tamanho principal do item flexível. (Ela mesma pode ser a palavra-chave auto, que dimensiona o item flexível com base em seu conteúdo.)

Cada item flexível possui um flex-basistamanho semelhante ao seu tamanho inicial. A partir daí, qualquer espaço livre restante é distribuído proporcionalmente (com base em flex-grow) entre os itens. Com auto, essa base é o tamanho do conteúdo (ou tamanho definido com width, etc.). Como resultado, itens com texto maior estão recebendo mais espaço geral no seu exemplo.

Se você deseja que seus elementos sejam completamente uniformes, é possível definir flex-basis: 0. Isso definirá a base flexível como 0 e, em seguida, qualquer espaço restante (que será todo o espaço, pois todas as bases são 0) será distribuído proporcionalmente com base flex-grow.

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

Este diagrama da especificação faz um bom trabalho em ilustrar o ponto.

E aqui está um exemplo de trabalho com seu violino.

Para criar elementos com largura igual usando Flex, você deve definir o filho do seu (elementos flexíveis):

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

Isso dará a todos os elementos na linha 25% de largura. Eles não vão crescer e seguir um por um.