Flex-shrink 没有按预期工作

Question

我开始使用 flexbox，并且为了理解 flex-grow 和 flex-shrink ，我使用了一个简单的程序来显示两个块并使用 flex-grow: 2 使它们占据整个宽度 --- 在其中一个中， flex-grow: 1 在另一个中。

如果我在控制台中检查以下行： $(".one").width() === $(window).width() /3 它返回 true。到目前为止，一切都很好。

当我减小窗口大小时出现问题，因为一旦我这样做，控制台中的同一行 ( $(".one").width() === $(window).width() /3 ) 开始返回 false。

我知道 flex-shrink 的默认值是 1 。这是否意味着两个块之间的比例将保持不变（因为它们都缩小了相同的量）？谁能解释为什么会出现这种结果？

这是我的代码：

 * {
  font-family: verdana;
  margin: 0;
}

body {
  background: #eee;
}

.wrapper {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  background-color: white;
}

.box {
  height: 100px;
}

.one {
  background-color: red;
  flex-grow: 1;
}

.two {
  background-color: blue;
  flex-grow: 2;
}

 <div class="wrapper">
  <div class="flex-container">
    <div class="box one"></div>
    <div class="box two"></div>
  </div>
</div>

原文由 Larpee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

flex-shrink 旨在分配容器中的 负 自由空间。

换句话说，它仅在弹性项目大到足以溢出容器时才起作用。

你在这里没有那个问题。没有负空间。因此，我不相信 flex-shrink 对您的布局有任何影响。

flex-grow 正在消耗 正 可用空间并且似乎工作正常。

您需要设置 flex-basis 或将内容添加到项目中以将 flex-shrink 投入游戏。

https://www.w3.org/TR/css-flexbox-1/#flex-property

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

虽然与您的问题无关，但可能值得注意：

flex-wrap 优先于 flex-shrink ，除非项目比容器宽。

• 因此，如果您启用了 flex-wrap 并且您希望两个项目收缩以并排放置在一行中，它们不会，它们将首先换行，即使有足够的收缩潜力。
• 如果项目比父容器宽，它就不能包裹，所以如果可以的话它会收缩。
• 你必须用最小/最大宽度来解决这个问题，使初始尺寸更小（这可能是最好的方法）或创建一个没有 flex-wrap 的新父容器。

另请参阅 当 flex-wrap 被包裹时，flex-shrink 有什么用吗？

原文由 Simon_Weaver 发布，翻译遵循 CC BY-SA 4.0 许可协议