因为-如果你想让项目在宽度上伸展-你必须通过添加flex-grow: 1;来允许flex项目 * 增长 *：
（justify-content: stretch;在这里根本不需要顺便说一句-它没有效果）

.box {
  display: flex;
  width: 500px;
  border: 1px solid red;
  
}

.item {
  width: 100px;
  border: 1px solid green;
  flex-grow: 1;
}

个字符
如果你不是说它们应该增长，而是简单地分布在容器的整个宽度上，那么使用justify-content: space-between od ... space-around：

.box {
  display: flex;
  justify-content: space-around;
  width: 500px;
  border: 1px solid red;
}

.item {
  width: 100px;
  border: 1px solid green;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

的字符串

为什么justify-content: stretch不工作？
因为在flexbox中没有**justify-content这样的值。
请参阅MDN： 弹性盒（flexbox）不支持拉伸*。*
因此，您的规则无效，浏览器默认为justify-content: flex-start，即初始设置。
在flex项目上使用flex-grow属性以达到所需的效果。

是的，它应该看起来像Flex容器那样，使用了flex-start而不是flex-stretch。以下是W3C关于对齐内容的声明：stretch
justify-content属性沿着主轴应用，但由于主轴中的拉伸由伸缩控制，因此拉伸的行为与伸缩-开始相同。
此外，我可能会晚回答这个问题，但MDN也更新了他们的网页上的理由内容。请参见拉伸属性MDN下的注解

简单地说，为了让flex-stretch发挥作用，它要求组合项宽度等于或大于flex容器。换句话说，你可以使用500 px，甚至像10000 px这样模糊的东西。它会按比例伸展。通常，不过…为了解决这个问题，我们在每个项目上使用100%。这是假设100%的组件，但再次...如果你的容器是500 px，那就是100%的值。使用该值或更大的值。
当我学习flex的时候，我发现这个simple flex generator非常有用，我认为它涵盖了你所谈论的视觉情况。

另一种使项目均匀间隔的方法是：

.class {
    display: flex;
    justify-content: space-between;
}

字符串