如何选择性控制Flex项目的响应性？——固定两侧宽度、中间项0-400px伸缩的布局调试问题

我看了你的代码，问题出在中间项目（#item-2）的flex属性设置上。你当前用的flex: 1 1 auto里的flex-basis: auto会阻止项目收缩到0px，因为这个值会让Flex项目以自身的内容宽度（或默认尺寸）作为基准来计算收缩比例。

修正后的完整代码 #

HTML（保持不变）

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

CSS（仅修改#item-2的flex属性）

#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; /* 保留这个设置，它能覆盖Flex项目默认的min-width:auto，确保可以收缩到0 */
  max-width: 400px; 
  background-color: green; 
  flex: 1 1 0px; /* 核心修改：把flex-basis从auto改为0px */
} 
#item-3 { 
  height: 300px; 
  width: 400px; 
  background-color: blue; 
  flex: 0 0 auto; 
}

关键修改说明 #

1. 将flex-basis设为0px：
   • 当flex-basis为0px时，Flex项目的基准宽度被重置为0，这意味着它的收缩和增长都会以0为起点计算。这样当容器宽度收缩到800px（左右项目宽度之和）时，中间项目会被完全挤压到0px；当容器宽度扩展时，它会优先填充可用空间，直到达到max-width:400px的上限。
2. 保留min-width:0px：
   • Flex项目默认的min-width是auto，这个值会阻止项目收缩到自身内容宽度以下（即使内容为空，浏览器也可能保留最小尺寸）。你之前添加的min-width:0px是正确的，它能覆盖这个默认行为，确保项目可以收缩到0。

现在测试的话，当容器宽度是800px时，中间绿色项目宽度为0；当容器宽度在800px到1200px之间时，绿色项目会从0px增长到400px；当容器宽度达到1200px时，三个项目总宽度刚好是400+400+400=1200px，完美符合你的需求。

内容的提问来源于stack exchange，提问作者abubakarutar