CSS Flexbox中flex-shrink仅在设置flex-grow后生效的原因咨询

问题分析 #

你遇到的核心问题出在flex项的基础尺寸定义和图片自身宽度的约束上：

• 给img设置固定width:300px时，flex-basis默认继承这个值，再配合flex-wrap:wrap，容器空间不足时flex项会直接换行，不会触发flex-shrink收缩。
• 设置flex-grow后，flex项会先扩展填充容器空间，此时flex-basis不再是固定300px，窗口缩小时容器空间不足，flex-shrink才会生效。
• 添加max-width:300px同时保留width:300px，相当于把图片宽度锁死在300px，自然无法继续缩小。

修正后的代码 #

调整img的样式，用flex-basis定义初始尺寸，配合width:100%让图片跟随flex项收缩：

.flex{
   display: flex;
   width: 100%;
   height: 800px;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: flex-start;
}

img{
  flex-grow: 0;
  flex-shrink: 2;
  flex-basis: 300px; /* 替代固定width，定义flex项初始基础尺寸 */
  max-width: 300px; /* 限制图片最大宽度 */
  min-width: 150px; /* 可选：设置最小收缩宽度，避免图片过窄 */
  margin: 20px;
  width: 100%; /* 让图片宽度随flex项尺寸变化 */
}

关键说明 #

1. flex-basis：替代固定width作为flex项的初始尺寸，让flex-shrink能基于这个值计算收缩比例。
2. width:100%：确保图片自身宽度跟随flex项的收缩/扩展变化，而不是保持固定值。
3. flex-grow:0：避免图片在容器空间充足时自动扩展，维持初始的300px基础尺寸。
4. flex-wrap:wrap：保留后，当窗口小到flex项（含margin）的最小尺寸总和超过容器宽度时，会自动换行，换行前会先收缩到min-width（如果设置）。

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