html - Flex-shrink 没有按预期工作

Question

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

如果我检查控制台中的以下行:$(".one").width() === $(window).width()/3 它返回 true。到目前为止，还不错。

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

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

这是我的代码:

* {
  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-wrap takes precedence over flex-shrink, unless the item is wider than the container.

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

另见 Is there any use for flex-shrink when flex-wrap is wrap?