Попытка навигации flexbox, которая имеет до 5 элементов и всего 3, но это не делит ширину поровну между всеми элементами.

скрипка

Учебное пособие, которое я моделирую после этого: 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>

Есть важный момент, который не упоминается в статье, с которой вы связаны, и это так flex-basis. По умолчанию flex-basisэто auto.

Из спецификации :

Если указанная гибкая основа имеет значение auto, используемая гибкая основа является значением свойства основного размера элемента Flex. (Само по себе это может быть ключевое слово auto, которое определяет размер элемента flex в зависимости от его содержимого.)

Каждый элемент flex имеет своего flex-basisрода начальный размер. Затем оттуда любое оставшееся свободное пространство распределяется пропорционально (на основе flex-grow) между элементами. При autoэтом основой является размер содержимого (или определенный размер с помощью widthи т. Д.). В результате в вашем примере элементам с более крупным текстом выделяется больше места.

Если вы хотите, чтобы ваши элементы были абсолютно ровными, вы можете установить flex-basis: 0. Это установит гибкое основание равным 0, и тогда любое оставшееся пространство (которое будет всем пространством, поскольку все основания равны 0) будет пропорционально распределено на основе flex-grow.

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

Эта диаграмма из спецификации довольно неплохо иллюстрирует ситуацию.

И вот рабочий пример с вашей скрипкой.

Чтобы создать элементы с одинаковой шириной Flex, вы должны установить дочерний элемент (flex elements):

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

Это даст всем элементам в ряду 25% ширины. Они не будут расти и идти один за другим.