Flex容器未生效需先检查display: flex是否被覆盖；子项错乱应启用Chrome Flexbox Inspector查看主轴方向；flex: 1占不满因flex-basis默认为auto，建议改用flex: 1 1 0；响应式崩溃常因min-width阻止换行，需设min-width: 0。
Flex容器没生效？先检查 display: flex 是否被覆盖
很多情况下 display: flex 写了但布局毫无反应，不是语法错，而是被后续样式或继承值悄悄覆盖了。比如父元素用了 display: contents，或者通过 CSS 重置库（如 Normalize.css）间接影响了默认行为；更常见的是开发者工具里看到的“已计算”值是 flex，但实际渲染时被 display: block !important 覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome DevTools 的 Styles 面板中，勾选「Show all」，逐行确认
display是否真正在生效层级上 - 右键元素 → «Reveal in Elements Panel» 后，直接点开 Computed 标签页，搜索
display，看最终值和来源文件行号 - 临时删掉所有自定义 CSS，只留
display: flex，确认基础行为是否正常——这能快速排除层叠干扰
子项排列错乱？打开 Flexbox Inspector 看对齐方向
Chrome 从 v89 开始内置 Flexbox 可视化调试器，但它默认不开启。不打开它，你就只能靠猜 justify-content 和 align-items 到底作用在哪个轴上，尤其当容器加了 flex-direction: column 后，主轴/交叉轴完全调转。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板中选中 flex 容器 → 右上角三个点 → «Show flexbox overlay»（或按
Ctrl+Shift+P输入 “flex” 快速启用） - 图中标出的虚线箭头代表主轴方向，带字母的矩形框显示每个子项的
flex-basis、flex-grow实际分配比例 - 如果某子项被意外拉伸，检查它是否设置了
min-width: auto（Chrome 默认行为），而你又没显式设min-width: 0—— 这会导致flex-shrink失效
Chrome 显示「flex: 1」却占不满？注意 flex-basis 的隐式值
flex: 1 看似简单，实际等价于 flex: 1 1 0%（旧写法）或 flex: 1 1 auto（新规范），而浏览器实现有差异。Chrome 当前版本（v120+）对 flex-basis: auto 的处理会优先参考内容宽度，导致多个 flex: 1 子项无法均分容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想严格等分？把
flex: 1改成flex: 1 1 0（注意末尾是数字0，不是字符串"0px"） - 在 DevTools 的 Layout 标签页里，展开「Flex parameters」，直接查看每个子项的
flex-basis计算值——如果显示为auto且数值远大于预期，就是它了 - 避免混用
width和flex-basis：一旦同时设置，flex-basis会优先生效，width只在flex-basis: auto时兜底
响应式 flex 布局崩溃？别只盯着媒体查询，查 computed flex-wrap
移动端常见问题：桌面端好好的三列 flex，在小屏下突然堆成一列还溢出屏幕。表面看是 flex-wrap: wrap 没起作用，其实是 Chrome 在某些缩放比例或 DPR 下，对 flex-basis 的像素计算出现微小偏差，导致总宽度略超容器，触发换行——但换行后子项又因 min-width 卡死，撑破父容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Computed 面板里搜索
flex-wrap，确认值确实是wrap，而不是被@supports或 JS 动态样式覆盖成nowrap - 给子项加
min-width: 0（尤其含图片或文本的 flex 项），防止内容撑开破坏换行逻辑 - 用 DevTools 的「Rendering」面板（
Ctrl+Shift+P→ «Rendering»）开启 «Layer borders»，观察 flex 容器是否意外生成了新的 stacking context 或 layout boundary，干扰换行判断
Flex 可视化本身不解决逻辑错误，它只暴露真实计算结果。最常被忽略的，是 flex-basis 在不同上下文里的隐式取值，以及 min-width 对 flex-shrink 的静默拦截。
