Flexbox 没有给元素相等的宽度

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

从 the spec：

如果指定的 flex-basis 是 auto，则使用的 flex base 是 flex 项的主要尺寸属性的值。 （这本身可以是关键字 auto，根据内容调整弹性项目的大小。）

每个弹性项目都有一个 flex-basis，它有点像它的初始大小。然后从那里，任何剩余的可用空间在项目之间按比例分配（基于 flex-grow）。对于 auto，该基础是内容大小（或用 width 定义的大小等）。因此，在您的示例中，具有较大文本的项目总体上被赋予了更多空间。

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

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

This diagram from the spec 很好地说明了这一点。

here is a working example 用你的小提琴。

---

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

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

它将为行中的所有元素提供 25% 的宽度。它们不会一一生长和去。

---

正如@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

---

解决方案：

flex: 1;

或者

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

解释：

如果您只放置 display: flex，它只是水平对齐所有项目，宽度将是孩子宽度的 sum（取决于内容或有时是 width 属性）。

例如：

// 一个普通的 flex

++++++++++   ++++++++++   ++++++++++
+        +   +        +   +        +
+   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  +
+        +                              +        +                              +        +
++++++++++                              ++++++++++                              ++++++++++

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

---

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，那么选项很少

flex-basis: 100% 给所有孩子，这将是一场势均力敌的比赛。或 flex-basis: 0 这没有第一个选项有用

---