Flexbox没有给予元素相同的宽度

本文翻译自：Flexbox not giving equal width to elements

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. 尝试最多包含5个项目且少至3个的flexbox导航，但它并未在所有元素之间平均分配宽度。

Fiddle 小提琴

The tutorial I'm modeling this after is http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ 我正在建模的教程是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> 

---

#1楼

参考：https://stackoom.com/question/1hArm/Flexbox没有给予元素相同的宽度

---

#2楼

There is an important bit that is not mentioned in the article to which you linked and that is flex-basis . 您链接的文章中没有提到重要的一点，这是flex-basis 。 By default flex-basis is auto . 默认情况下， flex-basis为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. 如果指定的flex-basis为auto，则使用的flex基础是flex项的main size属性的值。 (This can itself be the keyword auto, which sizes the flex item based on its contents.) （这本身就是关键字auto，它根据其内容调整flex项的大小。）

Each flex item has a flex-basis which is sort of like its initial size. 每个弹性项目都有一个flex-basis ，有点像它的初始大小。 Then from there, any remaining free space is distributed proportionally (based on flex-grow ) among the items. 然后，从那里，任何剩余的自由空间按比例分配（基于flex-grow ）项目。 With auto , that basis is the contents size (or defined size with width , etc.). 对于auto ，该基础是内容大小（或定义的width大小等）。 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 . 如果希望元素完全均匀，可以设置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 . 这将将flex基础设置为0，然后任何剩余空间（由于所有基础都为0将是所有空间）将基于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. 这是一个小提琴的工作示例 。

---

#3楼

To create elements with equal width using Flex , you should set to your's child (flex elements): 要使用Flex创建宽度相等的元素，您应该设置为您的孩子（flex元素）：

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

It will give to all elements in row 25% width. 它将给行25％宽度的所有元素。 They will not grow and go one by one. 他们不会一个接一个地成长。