Flexbox不给与元素相同的宽度
尝试flexbox导航，最多有5个项目，只有3，但它没有在所有元素之间平分宽度。
小提琴
我正在build模的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
上海社会科学院
* { 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; ul { margin:0; display: flex; flex-direction: row; 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; &.active { background: white; color: blue; } &:before { content:""; } } } } HTML
<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项目的大小。）
每个弹性项目都有一个flex-basis ，这是有点像它的初始大小。 然后从这些项目中剩余的空闲空间按比例分配（基于flex-grow ）。 对于auto ，这个基础是内容的大小（或定义的width等）。 因此，在您的示例中，文本中文本较大的项目会获得更多空间。
如果你想要你的元素是完全平坦的，你可以设置flex-basis: 0 。 这会将弹性基础设置为0，然后基于flex-grow将剩余空间（这将是所有空间，因为所有基础都为0）按比例分配。
li { flex-grow: 1; flex-basis: 0; /* ... */ }
规范中的这个图表很好地说明了这一点。
这是你的小提琴的一个工作的例子 。
要使用Flex创build具有相同宽度的元素，您应该设置为您的子元素（弹性元素）：
flex-grow：0;
弹性基础：25％;
它会给行25％宽度的所有元素。 他们不会一个一个地长大。
