尝试一个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: 1;
OR
.flex-child-items{
flex-grow: 1;
}
解释:
如果你只放display: flex它只是水平对齐所有项目，宽度将是子项目宽度的和(取决于内容，有时也取决于width属性)。
例如:
//一个正常的flex
++++++++++ ++++++++++ ++++++++++
+ + + + + +
+ A + + B + + C +
+ 10px + + 10px + + 10px +
+ + + + + +
++++++++++ ++++++++++ ++++++++++
现在假设你想要把空间平均分配给它们。
为此，在flex的所有子元素中添加flex-grow: 1。(在本例中是A,B和C)
.A, .B, .C {
flex-grow: 1;
}
之后是这样的:
++++++++++ ++++++++++ ++++++++++
+ + + + + +
+ A + + B + + C +
+ 10px + + 10px + + 10px +
+ + + + + +
++++++++++ ++++++++++ ++++++++++
*顺便说一句，如果上面的例子框看起来不像中心，对不起，但代码工作尝试在项目中。
有一个重要的部分在你链接的文章中没有提到，那就是弹性基础。默认情况下，flex-basis是auto。
来自规范:
如果指定的伸缩基准为auto，则使用的伸缩基准为伸缩项的主大小属性的值。(这本身可以是关键字auto，它根据伸缩项的内容来调整伸缩项的大小。)
每个伸缩项都有一个伸缩基础，这有点像它的初始大小。然后，剩余的空闲空间按比例(基于flex-grow)分配到各个项目中。对于auto，这个基础是内容大小(或定义宽度的大小等)。因此，在您的示例中，包含较大文本的项总体上被赋予了更大的空间。
如果你想让你的元素完全均匀，你可以设置flex-basis: 0。这将把弹性基底设置为0，然后任何剩余空间(将是所有空间，因为所有基底都是0)将基于flex-grow按比例分布。
li {
flex-grow: 1;
flex-basis: 0;
/* ... */
}
说明书中的这张图很好地说明了这一点。
这里有一个小提琴的例子。
