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.
The tutorial I'm modeling this after is http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
SASS
* {_x000D_
font-size: 16px;_x000D_
}_x000D_
_x000D_
.tabs {_x000D_
max-width: 1010px;_x000D_
width: 100%;_x000D_
height: 5rem;_x000D_
border-bottom: solid 1px grey;_x000D_
margin: 0 0 0 6.5rem;_x000D_
display: table;_x000D_
table-layout: fixed;_x000D_
}_x000D_
.tabs ul {_x000D_
margin: 0;_x000D_
display: flex;_x000D_
flex-direction: row;_x000D_
}_x000D_
.tabs ul li {_x000D_
flex-grow: 1;_x000D_
list-style: none;_x000D_
text-align: center;_x000D_
font-size: 1.313rem;_x000D_
background: blue;_x000D_
color: white;_x000D_
height: inherit;_x000D_
left: auto;_x000D_
vertical-align: top;_x000D_
text-align: left;_x000D_
padding: 20px 20px 20px 70px;_x000D_
border-top-left-radius: 20px;_x000D_
border: solid 1px blue;_x000D_
cursor: pointer;_x000D_
}_x000D_
.tabs ul li.active {_x000D_
background: white;_x000D_
color: blue;_x000D_
}_x000D_
.tabs ul li:before {_x000D_
content: "";_x000D_
}<div class="tabs">_x000D_
<ul>_x000D_
<li class="active" data-tab="1">Pizza</li>_x000D_
<li data-tab="2">Chicken Noodle Soup</li>_x000D_
<li data-tab="3">Peanut Butter</li>_x000D_
<li data-tab="4">Fish</li>_x000D_
</ul>_x000D_
</div>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.
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.
Source: Stackoverflow.com