Flexbox no da la misma anchura a los elementos

Intentar un flexbox nav que tenga hasta 5 elementos y tan poco como 3, pero no está dividiendo el ancho por igual entre todos los elementos.

Fiddle

El tutorial que estoy modelando es 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>
Author: Mosh Feu, 2014-07-31
Source

2 answers

Hay un bit importante que no se menciona en el artículo al que ha vinculado y que es flex-basis. Por defecto flex-basis es auto.

De la especificación:

Si la base flex especificada es auto, la base flex utilizada es el valor de la propiedad main size del elemento flex. (Esta puede ser la palabra clave auto, que clasifica el elemento flex en función de su contenido.)

Cada elemento flexible tiene un flex-basis que es como su tamaño inicial. Luego de allí, cualquier espacio libre restante se distribuye proporcionalmente (basado en flex-grow) entre los elementos. Con auto, esa base es el tamaño del contenido (o tamaño definido con width, etc.). Como resultado, los elementos con texto más grande dentro se les da más espacio en general en su ejemplo.

Si desea que sus elementos sean completamente pares, puede establecer flex-basis: 0. Esto establecerá la base flex en 0 y luego cualquier espacio restante (que será todo el espacio ya que todas las bases son 0) será proporcionalmente distribuido basado en flex-grow.

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

Este diagrama del spec hace un buen trabajo ilustrando el punto.

Y aquí hay un ejemplo de trabajo con su violín.

 533
Author: James Montagne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-31 19:06:22

Para crear elementos con igual ancho usando Flex, debe establecer su hijo (elementos flexibles):

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

Dará a todos los elementos de la fila un ancho del 25%. No crecerán e irán uno por uno.

 7
Author: alexJS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-06 12:13:46