Flexbox 没有给元素相等的宽度

Question

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

小提琴

我在此之后建模的教程是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;
}
.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 basis 是 flex item 的 main size 属性的值。 （这本身可以是关键字 auto，它根据内容调整弹性项目的大小。）

每个弹性项目都有一个

flex-basis

，有点像它的初始大小。然后从那里，任何剩余的可用空间在项目之间按比例分配（基于

flex-grow

）。对于

auto

，该基础是内容大小（或使用

width

等定义的大小）。因此，在您的示例中，包含较大文本的项目在整体上获得了更多空间。

如果你想让你的元素完全均匀，你可以设置

flex-basis: 0

。这会将弹性基础设置为 0，然后任何剩余空间（这将是所有空间，因为所有基础均为 0）将根据

flex-grow

.

按比例分配

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

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

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

Answer 2

正如@James Montagne 的回答中所解释的

flex-basis: 0

将确保 flexbox 列均匀分布，这在这种情况下有效，因为列内容可以换行并且不会强制宽度。但是，在强制列内容的宽度的情况下（例如图像宽度或空白：nowrap），解决方案是设置

min-width: 0

...

li {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

https://codeply.com/p/sLZxZRFduI

Answer 3

要使用

Flex

创建等宽的元素，您应该设置为您的孩子（弹性元素）：

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

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

Answer 4

解决方案：

flex: 1;

或

.flex-child-items{
   flex-grow: 1;
} 

解释：

如果你只放

display: flex

它只是水平对齐所有项目并且宽度将是孩子宽度的

sum

（取决于内容或有时

width

属性）。

例如：

// 正常弯曲

++++++++++   ++++++++++   ++++++++++
+        +   +        +   +        +
+   A    +   +   B    +   +   C    +
+  10px  +   +  10px  +   +  10px  +
+        +   +        +   +        +
++++++++++   ++++++++++   ++++++++++

现在假设你想把空间平均分配给他们所有人。 为此，将

flex-grow: 1

添加到 flex 的所有子项。 （在本例中为 A、B 和 C）

.A, .B, .C {
    flex-grow: 1;
}

之后它看起来像这样：

++++++++++                              ++++++++++                              ++++++++++
+        +                              +        +                              +        +
+   A    +                              +   B    +                              +   C    +
+  10px  +                              +  10px  +                              +  10px  +
+        +                              +        +                              +        +
++++++++++                              ++++++++++                              ++++++++++

*顺便说一句，如果上面的示例框看起来不像中心，抱歉，但代码工作可以在项目上尝试。

Answer 5

Flex 可能不会在所有情况下为子级提供相同的宽度。

对等宽元素使用 css 网格。

.el{
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr
}

参考https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/

如果你只想使用 CSS flex，那么选项很少

1. flex-basis: 100%

   所有的孩子，这将是一场势均力敌的比赛。 或者

2. flex-basis: 0

   这不如第一个选项有用