Question

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

结果基本上接近：

[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

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

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

因此您的规则无效，并且浏览器默认为初始设置justify-content: flex-start。

在弹性项目上使用flex-grow属性以达到所需的效果。

Answer 2

因为-如果您希望这些项目在宽度上伸展-您必须通过添加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 3

是的，它应该是 flex 容器的样子，使用 flex-start 而不是 flex-stretch。以下是 W3C 关于 justify-content:stretch 的声明

<块引用>

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

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

下的注释

Answer 4

均匀分布项目的另一种方法是：

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

Answer 5

简单地说，为使flex-stretch生效，它要求组合的项目宽度等于或大于flex容器。换句话说，您可以使用500px甚至是10000px之类的晦涩的东西。它将按比例拉伸。通常，尽管...为了解决这个问题，我们在每个项目上使用100％。这假定组件的百分比为100％，但同样...如果您的容器为500px，则100％等于。使用该值或更大的值。

当我学习flex时，我发现这个simple flex generator很有用，我认为它涵盖了您在视觉上谈论的情况。

为何不证明内容合理：伸展工作？

5 个答案: