Flex布局不违反盒模型但默认行为会干扰尺寸计算，需重点控制flex-shrink、object-fit、flex-wrap和min-width等属性协同作用。
Flex布局本身不违反盒模型，但它的默认行为会和传统盒模型的尺寸计算产生叠加干扰——比如内边距、边框、内容撑开、flex-shrink自动压缩等，都会让“设了width却没生效”“图片被拉扁”“元素突然换行或溢出”这类问题反复出现。关键不是改错，而是理解哪些属性在叠加时真正起作用。
子元素宽度不生效？先看flex-shrink是否在偷偷压缩
Flex容器中，即使写了width: 200px，子项仍可能被压缩变窄，因为默认flex-shrink: 1允许收缩。解决方式很直接：
- 加
flex-shrink: 0禁用压缩，再配width或flex-basis - 用简写
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px） - 若需响应式宽度，改用
flex: 0 0 calc(100% - 20px)，显式扣减padding或gap
图片变形或留白？object-fit + display:block双保险
Flex里图片常因基线对齐或默认拉伸行为导致比例错乱。这不是bug，是默认渲染逻辑：
- 给图片加
display: block，消除inline元素自带的基线下方空白 - 用
object-fit: cover或contain控制缩放方式，避免fill强行拉伸 - 配合
width: 100%; height: 120px;或aspect-ratio: 16/9锁定视觉比例 - Safari兼容可补
-webkit-flex和width/height: 100%
内容溢出或换行失控？检查flex-wrap和min-width
单行Flex容器遇到宽内容时，既不换行又不滚动，往往卡在两个默认值上：
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: nowrap（默认），必须显式设wrap才允许折行 -
min-width: auto（默认），会让文本类内容撑开父容器；改成min-width: 0或具体值可释放收缩空间 - 强制单行场景，用
overflow-x: auto+scroll-snap-align做横向滚动更可控
响应式下尺寸跳变？优先用相对单位+max-width兜底
固定像素宽度在不同屏幕下容易失衡，尤其配合gap或padding时：
- 列宽用
flex: 1或minmax(240px, 1fr)替代width: 200px - 文字容器加
max-width: 100%防溢出，图片加max-width: 100%; height: auto - gap用rem或%单位，避免与px padding叠加后造成不可控间隙
