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

从规范:

如果指定的伸缩基准为auto，则使用的伸缩基准为伸缩项的主大小属性的值。(这本身可以是关键字auto，它根据伸缩项的内容来调整伸缩项的大小。)

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

如果你想让元素完全均匀，你可以设置flex-basis: 0。这将把伸缩基设置为0，然后任何剩余空间(将是所有空间，因为所有基都是0)将基于flex-grow按比例分配。

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

这是说明书上的图表很好地说明了这一点。

和下面是一个工作示例与你的小提琴。

要使用Flex创建相同宽度的元素，你应该设置为你的子元素(伸缩元素):

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

它会给行中所有元素25%的宽度。它们不会一个接一个地生长和消失。

解决方案:

flex: 1;

或

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

解释:

如果你只放display: flex，它只是水平对齐所有的项目，宽度将是子宽度的sum(取决于内容，有时是width属性)。

例如:

//一个正常的flex

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

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

之后是这样的:

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

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

正如@James Montagne回答中解释的那样，flex-basis: 0将确保flexbox列均匀分布，在这种情况下工作，因为列内容可以换行，而不是强制宽度。然而，在列内容的宽度被强制的情况下(例如使用图像宽度或white-space: nowrap)，解决方案是设置min-width: 0…

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

https://codeply.com/p/sLZxZRFduI

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这个没有第一个选项有用