为什么不 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>

Answer 1

因为 - 如果您希望项目在宽度上拉伸 - 您必须通过添加 flex-grow: 1;:

来允许弹性项目增长

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

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

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

如果您不是说它们应该增长，而只是分布在容器的整个宽度上，请使用 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>

Answer 2

为什么justify-content: stretch 不起作用？

因为在 flexbox 中没有 justify-content 这样的值。

参见MDN：stretch 不受柔性盒（flexbox）支持。

所以你的规则无效，浏览器默认为justify-content: flex-start，初始设置。

在弹性项目上使用flex-grow 属性来达到预期的效果。

Answer 3

嗯，简单地说，为了让 flex-stretch 发挥作用，它要求组合项目的宽度等于或大于 flex 容器。换句话说，你可以使用 500px 甚至像 10000px 这样晦涩的东西。它会按比例拉伸。但是，通常...为了解决这个问题，我们在每个项目上使用 100%。这假设 100% 的组件，但同样......如果你的容器是 500px，这就是 100% 将等于。使用那个或更大的值。

当我学习 flex 时，我发现 simple flex generator 非常宝贵，我认为它涵盖了您在视觉上谈论的情况。

Answer 4

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

justify-content 属性沿主轴应用，但由于 主轴上的拉伸由 flex 控制，拉伸表现为 弹性启动。

另外，我可能会迟到回答这个问题，但 MDN 也更新了他们关于 justify-content 的页面。见拉伸属性下的注释MDN

Answer 5

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

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