如何创建一个在包装之前收缩的flex项？

Question

从这个JS-Fiddle中可以看出,我基本上尝试使用这个CSS来创建两个应满足这些要求的div:

• 如果更宽的项目的空间可用两倍,则两者都应使用50%宽度(可行)
• 如果两个物品的空间不足,它们应该包裹(有效)
• 如果两个项目都有足够的空间,但是宽度小于宽度的两倍,则较窄的项目应该缩小(这不起作用,它包裹)

我不明白这种行为,因为我已经设置flex-shrink了flex项目,所以它们应该能够缩小 - 但它们不会:如果较窄的项目宽度小于50%,它会包装.

.m {
  display: flex;
  flex-wrap: wrap;
}

.l_1 {
  background-color: red;
  flex: 1 1 50%;
}

.r_1 {
  background-color: yellow;
  flex: 1 1 50%;
}

<div class=m>

  <div class=l_1>
    left_______________________________________________X
  </div>

  <div class=r_1>
    right
  </div>


</div>

(在Firefox和Chrome上测试过)

Answer 1

问题不是flex-shrink。问题是flex-basis。您已将其设置为 50%。

这意味着flex-grow将向 增加可用空间flex-basis，并且每个项目将在有机会缩小之前快速换行。

从 切换flex-basis: 50%到flex-basis: 0。

更具体地说，不是flex: 1 1 50%use flex: 1，它分解为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

现在flex-grow将可用空间均等地（不成比例地）分配给两个项目，并且它们可以在包装之前缩小。

（这里有更深入的解释：Make flex-grow expand items based on their original size）

.m {
  display: flex;
  flex-wrap: wrap;
}

.l_1 {
  background-color: red;
  flex: 1;
}

.r_1 {
  background-color: yellow;
  flex: 1;
}

<div class=m>
  <div class=l_1>left_______________________________________________X</div>
  <div class=r_1>right</div>
</div>

修改后的小提琴