TLDR

Question

我开始使用flexbox，为了理解flex-grow和flex-shrink，我使用了一个显示两个块的简单程序，并使用{{{{{{ 1}}在其中一个中，flex-grow: 2在另一个中。

如果我在控制台中检查以下行：flex-grow: 1它返回true。到目前为止，非常好。

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

我知道$(".one").width() === $(window).width() /3的默认值为flex-shrink。这是否意味着两个街区之间的比例将保持不变（因为它们都被缩减了相同的数量）？谁能解释为什么会出现这种结果？

这是我的代码：

* {
  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;
}

Answer 1

flex-shrink旨在在容器中分发否定可用空间。

换句话说，只有当弹性项目足够大才能溢出容器时，它才有效。

你在这里没有遇到这个问题。没有负空间。因此，我认为flex-shrink对您的布局没有任何影响。

flex-grow正在消耗正面免费空间，似乎工作正常。

您需要设置flex-basis或向要添加flex-shrink的项目添加内容。

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

Answer 2

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

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

因此，如果您启用了flex-wrap，并且希望将两个项目缩小以并排放置在它们的单行中，那么即使有很大的收缩潜力，它们也会先包装。
如果该项目比父容器宽，则无法包装，因此可以收缩。
您必须使用最小/最大宽度来解决此问题，减小初始大小（这可能是最好的方法），或者创建一个没有flex-wrap的新父容器。

另请参阅Is there any use for flex-shrink when flex-wrap is wrap?

Answer 3

这与浮点计算有关。你的flex代码工作得很好，问题来自算术运算，其中容器的宽度可能不完全分为3，所以结果将是一个浮点数，可能会或不会舍入到最接近的数字，所以这是为什么第一个flexbox项目的宽度可能不等于width / 3，因为该舍入。

使用Chrome Inspector进行测试。

Answer 4

查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-13

他们建议使用简写flex: [number];，因为它会智能地将默认flex-shrink设置为0。仅仅因为flex-shrink的默认值为1并不意味着1就是您想要的。我没有长时间使用flexbox，但我还没遇到过必须指定flex-shrink的情况。到目前为止，0一直在为我工作。也许其他人可以提供使用它的场景。

TLDR

使用flex属性代替flex-grow

Flex-shrink无法按预期工作

4 个答案:

TLDR