为什么不 justify-content: 拉伸工作？

Question

为什么下面的代码不能拉伸我的 100px 项目？

结果基本接近这个：

 [100px|100px|100px|.........]

这看起来很像 flex-start，而不是 flex-stretch。这是预期的行为吗？

我在找：

 [...100px...100px...100px...]

 .box {
  display: flex;
  justify-content: stretch;
  width: 500px;
}

.item {
  width: 100px;
}

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

原文由 Beef Erikson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，它应该看起来像 flex 容器，使用 flex-start 代替 flex-stretch。以下是 W3C 关于 justify-content:stretch 的声明

justify-content 属性沿主轴应用，但由于主轴上的拉伸由 flex 控制，因此拉伸的行为与 flex-start 相同。

另外，我可能迟到了，但 MDN 也更新了他们关于 justify-content 的页面。请参阅拉伸属性 MDN 下的注释

原文由 Vaibhav 发布，翻译遵循 CC BY-SA 4.0 许可协议