Flexbox不给元素等宽

Question

尝试一个flexbox导航，最多有5个项目，少则3个，但它没有在所有元素之间平均划分宽度。

我在此建模的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

萨斯

null

* {
  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>

null

Answer 1

要使用flex创建宽度相等的元素，应设置为您的子元素（flex元素）：

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

它将为行中的所有元素提供25%的宽度。它们不会一个一个地成长和走。

Answer 2

您链接到的文章中有一个重要的部分没有提到，那就是flex-basis。默认情况下，flex-basis是auto。

根据规范：

如果指定的flex-basis为auto，则使用的flex basis为flex项的main size属性的值。（这本身可以是关键字auto，它根据flex项的内容调整其大小。）

每个flex项都有一个flex-basis，它有点像它的初始大小。然后从那里，任何剩余的空闲空间都按比例（基于flex-grow)分布在这些项之间。对于auto，基础是内容大小（或使用width定义的大小等）。因此，在您的示例中，具有较大文本的项将获得更多的空间。

如果希望元素完全均匀，可以设置flex-basis:0。这会将flex基准设置为0，然后任何剩余空间（因为所有基准都是0，所以所有空间都是）将基于flex-grow按比例分配。

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

规范中的这张图很好地说明了这一点。

这里有一个你的小提琴的工作例子。