Html Flexbox 没有为元素提供相等的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25066214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox not giving equal width to elements
提问by itsclarke
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
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>回答by James Montagne
There is an important bit that is not mentioned in the article to which you linked and that is flex-basis. By default flex-basisis auto.
您链接到的文章中没有提到一个重要的部分，那就是flex-basis. 默认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. (This can itself be the keyword auto, which sizes the flex item based on its contents.)
如果指定的 flex-basis 是 auto，则使用的 flex base 是 flex item 的 main size 属性的值。（这本身可以是关键字 auto，它根据其内容调整弹性项目的大小。）
Each flex item has a flex-basiswhich 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.
每个 flex item 都有一个flex-basis类似于它的初始大小。然后从那里开始，任何剩余的可用空间flex-grow在项目之间按比例（基于）分配。使用auto，该基础是内容大小（或使用 定义的大小width等）。因此，在您的示例中，包含更大文本的项目总体上获得了更多空间。
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.
如果你想让你的元素完全均匀，你可以设置flex-basis: 0. 这会将 flex 基础设置为 0，然后任何剩余的空间（由于所有基础都是 0，因此将是所有空间）将基于flex-grow.
li {
flex-grow: 1;
flex-basis: 0;
/* ... */
}
This diagram from the specdoes a pretty good job of illustrating the point.
And here is a working examplewith your fiddle.
而这里是工作示例与你的小提琴。
回答by alexJS
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. They will not grow and go one by one.
它将为行中的所有元素提供 25% 的宽度。他们不会一一成长。
