如何控制flexbox项目的增长/收缩顺序？

Question

我有一个带有三个子元素的弹性容器。每个子元素都有最小和最大宽度，我想让它们按特定顺序增长/缩小。因此，随着窗口宽度的减小，Item1应缩小到其最小宽度，然后Item2应缩小到其最小宽度，然后是Item3。有人能帮我弄清楚我做错了什么吗？我已经尝试从文档中理解如何设置顺序，但我还是无法理解。

<div className="MainContainer">
  <div className="Item1">
    I should shrink first/expand last!
  </div>
  <div className="Item2">
    I should shrink & expand second!
  </div>
  <div className="Item3">
    I should shrink last/expand first!
  </div>
</div>

以下是我的CSS：

.MainContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-left: 15px;
  padding-right: 15px;
}
//Should shrink first/expand last
.Item1{
  min-width: 350px;
  max-width: 816px;
  flex: 1;
  flex-grow: 0;
}
//Should shrink/expand second
.Item2{
  max-width: 816px;
  flex: 1;
  flex-grow: 1;
}
//Should shrink last/expand first
.Item3{
  min-width: 300px;
  max-width: 224px;
  flex: 1;
  flex-grow: 2;
}

- Case Silva

Answer 1

这不是flexbox的工作方式，你不能说“最后缩小”-你只能说“以与其他项目的收缩/增长率成比例的速度收缩/增长”

我想你通常设置太多的宽度，把自己搞糊涂了，不知道哪些属性实际上生效了。让事情自然发生，看看它们最终会到哪里。

这是一个带有评论的示例，希望能更清晰地说明问题：

.Item1{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 350px;
  // this means it will not shrink, have a min width of 350px, and grow at a rate of "1" (proportional to the other children in it's container) to fill up the remaining space
  // flex: 1 0 350px; <- the above is the same as this
}

//Should shrink/expand second
.Item2{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto; // this means it will not shrink, have a min width of it's "intrinsic size" and grow AT THE SAME RATE (1) as Item1 to fill up the remaining space
  // flex: 1; <- this is the shorthand for the above
}

互联网上关于flexbox的最佳参考资料是https://css-tricks.com/snippets/css/a-guide-to-flexbox/

- Adam Jenkins

Answer 2

以这个Stack Overflow的问题为起点，我成功实现了我的目标。

我稍微简化了一下尺寸，以便更易于阅读，但是我已经以相同的方式使我的项目正常运作。

请查看this codesandbox以查看我的使用React和TypeScript完全可行的实现（弹出预览到新窗口将有助于了解发生了什么）。我创建了一个自定义组件，它将显示每个元素的当前大小随着窗口调整而变化。当然，你自己不必这样做。

主要要看的是包含调整大小元素的包装器和scss中的样式，特别是如何将“first-to-shrink”和“second-to-shrink”类与设置在单个组件上的max-width、min-width和flex-basis相结合。另一个需要注意的地方是，我必须将容纳两个元素的容器的flex-basis设置为子元素的max-width之和。

我有三个对象需要按特定顺序缩小/扩展。按显示顺序，它们是：

次要文档 - 主要文档 - 答案窗格

次要文档的最小宽度为250px，最大宽度为500px，并且应该首先缩小。

主要文档的最小宽度为250px，最大宽度为500px，并且应该最后缩小。

答案窗格的最小宽度为150px，最大宽度为300px，并且应该第二个缩小。

当所有3个对象都缩小到其最小值时，会发生溢出，但我的实现可以处理。

“诀窍”在于我必须使用两个包装器/容器对象：

SecondaryDocument-container 包含次要文档，而 PrimaryDocument-AnswerPane-container 同时包含主要文档和答案窗格。

- Case Silva