Flexbox not giving equal width to elements

Question

Attempting a flexbox nav that has up to 5 items and as little as 3, but it's not dividing the width equally between all the elements.

Fiddle

The tutorial I'm modeling this after is 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>

Answer 1

There is an important bit that is not mentioned in the article to which you linked and that is flex-basis. By default flex-basis is auto.

From the spec:

If the specified flex-basis is auto, the used flex basis is the value of the flex item’s main size property. (This can itself be the keyword auto, which sizes the flex item based on its contents.)

Each flex item has a flex-basis which is sort of like its initial size. Then from there, any remaining free space is distributed proportionally (based on flex-grow) among the items. With auto, that basis is the contents size (or defined size with width, etc.). As a result, items with bigger text within are being given more space overall in your example.

If you want your elements to be completely even, you can set flex-basis: 0. This will set the flex basis to 0 and then any remaining space (which will be all space since all basises are 0) will be proportionally distributed based on flex-grow.

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

This diagram from the spec does a pretty good job of illustrating the point.

And here is a working example with your fiddle.

Answer 2

To create elements with equal width using Flex, you should set to your's child (flex elements):

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

It will give to all elements in row 25% width. They will not grow and go one by one.