设置它们的弹性基数为0(这样所有元素都有相同的起点)，并允许它们增长:

flex: 1 1 0px;

您的IDE或linter可能会提到度量单位“px”是多余的。如果你省略了它(比如:flex: 11 10)， IE将不会正确地渲染它。所以px需要支持Internet Explorer，正如@fabb的评论中提到的那样;

在flex的子元素上，

flex: 1 1 25%

这将允许有四个项目。

如果你想增加更多的项目，那么你可以减少%。

我也有类似的问题，所以找到了作弊的方法。

正如其他人所说，flex- base和flex-grow: 1是保持项大小相同的方法，但当项太少时，最后一行是例外(它们填满了所有可用空间，使它们比其他项更大)。为了防止这种情况发生，我添加了一个具有可见性的空间隔项:hidden，并根据快速计算有多少项来设置内联的flex- growth值。

如果您知道父容器的宽度，这就更容易了，但即使您不知道，也可以使用媒体查询和断点在间隔器上设置伸缩增长值。

设置它们的弹性基数为0(这样所有元素都有相同的起点)，并允许它们增长:

flex: 1 1 0px;

您的IDE或linter可能会提到度量单位“px”是多余的。如果你省略了它(比如:flex: 11 10)， IE将不会正确地渲染它。所以px需要支持Internet Explorer，正如@fabb的评论中提到的那样;

这将工作，即使你包装项目，如网格，但不是那么简单，你应该显示它将包装在媒体查询))。

例子:

.flex-item {
    flex: 0 0 calc(25% - (45px / 4))
}

它是这样工作的:

$n: 4; // Number of columns
$gap: 15px; // Margin pixels

.flex-parent {
    display: flex;
    gap: $gap;
}
.flex-item {
    flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}

你可以添加弹性基础:100%来实现这一点。

更新的例子

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

无论如何，您也可以使用flex: 1来获得相同的结果。

flex: 1的简写与flex: 11 10相同，相当于:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}