Flexbox没有给元素相等的宽度

Question

尝试最多包含5个项目且只有3个项目的flexbox导航，但它并未在所有元素之间平均分配宽度。

* {

  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>

Answer 1

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

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

每个伸缩项目都有一个flex-basis类似于其初始大小的。然后，从那里开始，所有剩余的可用空间将按比例（基于flex- grow）分配在项目之间。使用时auto，该基础是内容大小（或使用定义的大小width等）。因此，示例中总体上包含较大文本的项目将获得更大的空间。

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

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

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