Flex容器不生效主因是display被覆盖、父元素设为contents或none、重置库干扰；column布局需容器有高度；flex:1默认flex-basis为0%；wrap失效常因子项min-width或长单词阻碍换行。
flex 容器不生效？检查 display: flex 是否被覆盖
很多情况下写完 display: flex 却没反应，不是语法错，而是样式被后续规则干掉了。浏览器开发者工具里看 computed 样式，如果 display 最终是 block 或 inline，八成是层叠顺序问题。
- 检查是否有更高优先级的选择器（比如 ID 选择器、
!important）重设了display - 注意父元素是否设置了
display: contents或display: none，它们会让 flex 容器“失效” - 某些 CSS 重置库（如 normalize.css）可能对表单控件或自定义标签做了默认
display覆盖，要针对性排查
flex-direction: column 导致子项高度塌陷？别忘了设置容器高度
垂直布局时，flex-direction: column 下的子项若没显式高度，又没内容撑开，就会“看不见”。这不是 bug，是 flex 的默认行为：主轴（这里是 Y 轴）上不自动拉伸，除非你告诉它“有空间可分”。
- 容器必须有明确高度（
height、min-height或由父容器约束），否则flex无法计算剩余空间 -
align-items: stretch默认生效，但前提是容器在交叉轴（X 轴）方向有宽度约束；同理，justify-content在 column 下控制的是垂直对齐，但没高度就无从 justify - 用
min-height: 100vh替代height: 100vh更安全，避免内容超长时溢出
flex: 1 不按预期等分？注意它其实是 flex-grow + flex-shrink + flex-basis 的简写
flex: 1 看似简单，实际展开是 flex: 1 1 0% —— 这意味着“增长权重为 1、收缩权重为 1、基准尺寸为 0%”。很多人卡在“为什么三个 flex: 1 子项宽度不均？”
- 如果子项本身有固有宽度（比如图片、带 width 的 div），
flex-basis: 0%会忽略它，强制从零开始分配；想保留原有尺寸，改用flex: 1 1 auto -
flex-shrink: 1允许压缩，当容器太窄时，子项会被压扁；加flex-shrink: 0可禁止压缩（适合图标、按钮等最小宽度敏感元素） - 多个
flex: 1并列时，若其中某项内容过长且未设置overflow: hidden或white-space: nowrap，可能触发文本溢出并影响整体分配逻辑
flex-wrap: wrap 在小屏幕下失效？媒体查询不是唯一解
写 flex-wrap: wrap 后，子项仍挤在一行，常见原因是子项的 min-width 或内容（如长单词、URL）阻止了换行。
立即学习“前端免费学习笔记（深入）”；
- 给子项加
min-width: 0（尤其包裹了文字或弹性内容的容器），解除 flex item 的最小尺寸保护机制 - 对纯文本内容，补充
word-break: break-word或overflow-wrap: break-word，避免不可折行字符串撑爆容器 - 不要只依赖
@media切断点来改flex-direction，先确保wrap在当前视口下真能起作用——很多时候问题不在断点，而在子项自身抗拒换行
flex 布局真正难的不是记属性，是理解每个值背后的空间分配逻辑。一旦某个环节（比如容器无高度、子项有隐式 min-width、wrap 被内容卡住）没对上，整个链条就断了。调试时盯着 computed 样式里的实际数值，比反复改代码更有效。
