为什么不证明内容的合理性:伸展工作? [英] Why doesn't justify-content: stretch work?

问题描述

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

Why does the code below not stretch my 100px items?

结果基本上接近:

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

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

That looks a lot like flex-start, not flex-stretch. Is this the intended behavior?

我正在寻找:

[...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>

推荐答案

因为-如果您希望项目在宽度上伸展-您必须通过添加flex-grow: 1;允许弹性项目增长 :

Because - if you want the items to stretch in width - you have to allow the flex items to grow by adding 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:

If you don't mean they should grow, but simply be distributed across the whole width of their container, use 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>

这篇关于为什么不证明内容的合理性:伸展工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！