最常见的原因是父容器未设置display:flex；Flex布局依赖父级启用上下文，需确认父元素display值正确、未被覆盖、且非隐藏状态。
display:flex 为什么没生效
最常见的原因是只给子元素设了 flex 相关属性，却忘了在父容器上加 display: flex。Flex 布局是“容器驱动”的，子元素的 flex-grow、align-self 等行为，全依赖父级是否真正启用了 Flex 上下文。
检查时优先确认：
- 父元素的 display 值确实是 flex 或 inline-flex
- 没有被后续 CSS（比如某个重置样式表）覆盖成 display: block
- 父元素不是 display: none 或未渲染的条件节点（如 Vue 的 v-if 未触发）
inline-flex 和 flex 有什么实际区别
区别只在容器自身的文档流行为：flex 让容器成为块级元素，inline-flex 则保持内联特性——它不会独占一行，可以和其他内联元素（比如文字、<span></span>）并排显示。
典型用例：
- 导航菜单项水平排列且需左对齐到文字旁 → 用 inline-flex
- 卡片列表、表单布局、全宽区域分栏 → 用 flex
- 不要试图靠 inline-flex 实现“让 flex 容器变小”，它的尺寸仍由内容撑开，和 inline-block 行为一致
flex-direction: column 导致子元素换行失败
当设了 flex-direction: column，主轴变成垂直方向，此时 flex-wrap 默认仍为 nowrap —— 但“不换行”现在是指“不允许在垂直方向继续堆叠”，这往往不符合预期。
如果希望子元素在列方向溢出后自动换成新列（类似网格），得配对使用：
- flex-direction: column
- flex-wrap: wrap
- 同时必须限制容器高度（比如 height: 200px），否则没有“溢出”触发点，换行不会发生
注意：column + wrap 在 Safari 旧版本中有渲染 bug，若需兼容 iOS 14 以下，建议改用 display: grid
立即学习“前端免费学习笔记（深入）”；
flex: 1 不收缩的隐藏原因
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，但很多人忽略：只要子元素有固有宽度（比如图片、带 width 的 div、或内容本身很宽），flex-basis: 0 就会被覆盖，导致实际表现像 flex: 1 1 auto，从而不按比例压缩。
解决方法：
- 明确写 flex: 1 1 0，堵死 flex-basis 被推导的机会
- 对图片等替换元素，加 min-width: 0 或 width: 0; min-width: 100%
- 避免在 flex 子项上同时设 width 和 flex，二者逻辑冲突，浏览器会按规则舍弃一个
Flex 布局真正的复杂点不在语法，而在它把“尺寸计算权”从子元素移交给了父容器——一旦父容器尺寸不确定（比如 height: auto 且无高度约束）、或子元素存在不可伸缩的内容（如长单词、未设置 min-width 的表格），整个弹性链就容易卡住。调试时先盯住父容器的尺寸和 flex-direction，再看子元素的 flex-basis 是否被意外覆盖。
