单列flex布局无响应：窄屏时无法缩窄且居中失效问题排查

当flex布局在窄宽度（如230px左右）下无法缩窄、无法保持居中且两侧留边距，通常是以下几个原因导致：

• 子元素存在固定/最小宽度限制：如果flex子元素设置了width: [固定数值]或min-width: [固定数值]，当容器宽度小于这个阈值时，子元素无法继续收缩，直接撑大容器，导致布局无法适配窄屏。另外，子元素内的文本若未开启自动换行（比如设置了white-space: nowrap），会触发浏览器默认的最小宽度机制，让元素无法缩窄到文本宽度以下。
• flex-shrink属性被禁用：默认flex子元素的flex-shrink值为1（允许收缩），如果手动设置为flex-shrink: 0，子元素会维持原有宽度，不会随容器缩窄而变小，最终撑爆容器。
• 容器缺少宽度约束：如果flex容器未设置width: 100%或max-width: 100%，容器本身不会跟随视口宽度缩小，自然无法在窄屏上保持居中留边距的布局。
• 未处理溢出场景：当容器内元素总宽度超过容器宽度时，若未给容器设置overflow: auto或overflow: hidden，容器会被强行撑开，超出视口范围，导致居中效果失效。

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