Question

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

如果可以使用较宽项目的两倍空间，则两者都应使用50％宽度（有效）
如果两个项目的空间不足，则应该换行（有效）
如果两个物品都有足够的空间，但宽度不到宽的两倍，则较窄的物品应缩小（不起作用，包裹）

我不理解这种行为，因为我为弹性项目设置了flex-shrink，所以它们应该能够缩小 - 但是他们不会：如果较窄的项目会减少它超过50％宽，它包裹着。

＆＃13;

.m {
  display: flex;
  flex-wrap: wrap;
}

.l_1 {
  background-color: red;
  flex: 1 1 50%;
}

.r_1 {
  background-color: yellow;
  flex: 1 1 50%;
}

＆＃13;

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

＆＃13;

（在Firefox和Chrome上测试）

Answer 1

问题不在于flex-shrink。问题是flex-basis。你把它设置为50％。

这意味着flex-grow会为flex-basis添加可用空间，并且每个项目都会快速换行，然后才有机会缩小。

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

更具体地说，不是flex: 1 1 50%使用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>

revised fiddle

Answer 2

Flex-shrink不适用于flex-wrap: wrap也适用。它将换行。

唯一的例外是当你在行中只有一个弹性项目时。然后它应该允许应用flex-shrink。

也许适当的解决方法是仅在媒体查询中应用flex-wrap，所以它只发生在较小的视口中？

Answer 3

当启用换行时，它取代了缩小的位置，所以当有条件会触发收缩时，它会换行 - 直到行中只有一个项目，如果它仍然比容器大，那么它会缩小。

因此，您需要将所有框的flex-basis设置为包装前该块应该是最小大小。注意：一个框永远不会比minimum content width缩小，这意味着您可以将flex-basis设置为0，它将按每个框的最小内容宽度进行缩放。

然后，如果您希望展开框以填充可用空间，请使用flex-grow属性（flex中的第一个值）来控制每个框架应增长的相对数量。< / p>

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

3 个答案: