如何选择性地控制 Flex 项目的响应能力？答案

【问题标题】：How to selectively control the responsiveness of Flex items?如何选择性地控制 Flex 项目的响应能力？
【发布时间】：2022-01-31 01:29:03
【问题描述】：

我有一个包含 3 个弹性项目的弹性容器。我想这样做：

当你压缩/缩小/缩小容器的宽度时，中间项的宽度也会缩小，直到它的宽度为0px。
当你扩展/增加/增加容器的宽度时，中间项的宽度也会增加，直到它的宽度为400px。
无论容器的宽度如何，左右 flex 项的宽度都保持为 400 像素。

我尝试过使用 flex-shrink、flex-grow 和 flex-basis 属性，左右项保持不变（很好！），而中间项的宽度在 164px 和 400px 之间调整。我希望中间项的最小宽度为 0px，而不是 164px。

这是我迄今为止尝试过的：

<div id="flex-container">
  <div id="item-1"></div>
  <div id="item-2"></div>
  <div id="item-3"></div>
</div>

还有 CSS：

#flex-container {
  min-width: 800px;
  max-width: 1200px;
  height: 300px;
  display: flex;
  justify-content: center;
}

#item-1 {
  height: 300px;
  width: 400px;
  background-color: red;
  flex: 0 0 auto;
}

#item-2 {
  height: 300px;
  min-width: 0px
  max-width: 400px;
  background-color: green;
  flex: 1 1 auto;
}

#item-3 {
  height: 300px;
  width: 400px;
  background-color: blue;
  flex: 0 0 auto;
}

谢谢！

【问题讨论】：

它工作正常...
“无论容器的宽度如何，左右 flex 项的宽度都保持为 800px” 对 1200px 宽的容器没有意义，除非您的意思是 combined 宽度。
同样中间项的宽度也会增加，直到宽度达到800px。不计算其他要求。您是指代码中所述的 400px。
codepen.io/Paulie-D/pen/GROpwQX
Paulie_D，很抱歉让您感到困惑。左右弹性项目的宽度保持为 400px EACH。我知道仅仅说明它们的组合宽度可能会令人困惑，我深表歉意。中间项的宽度也会增加，直到它的宽度为 400px，而不是 800px。再次抱歉。我已推送所有更正，感谢您指出并回复。

标签： html css flexbox responsive-design

【解决方案1】：

在您的代码中，您错过了 css 项目 2 的最小宽度行中的分号 (;)。检查这是否是导致问题的原因，因为我在我的电脑上检查了相同的代码，它的工作方式与您希望的一样。

【讨论】：