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>

Answer 1

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

换句话说，它仅在 flex 项目大到足以溢出容器时才有效。

你这里没有这个问题。没有负空间。因此，我认为不会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的新父容器。

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