Flex容器自身仍占据文档流，仅子元素按flex规则排列；常见误解源于高度塌陷、父容器限制或inline-flex的行内特性。
Flex容器本身不会脱离文档流，但子元素默认会
很多人以为给某个元素加了 display: flex 就会让它“飘起来”，其实不是。这个元素自己仍占据文档流位置，只是它的子元素（flex items）开始按 flex 规则排列——而这些子元素的 display 行为会变，默认不再受块/行内流控制。
常见错误现象：div 加了 display: flex 后，它前面或后面的段落没被“顶开”，看起来像“没占位”，其实是它高度塌陷了（比如所有子项用了 align-items: flex-start 且内容很矮），或者父容器设置了 overflow: hidden 切掉了它的实际高度。
- 检查是否误以为“flex 子项不占流” = “flex 容器不占流”——这是混淆层级
- 用浏览器开发者工具高亮该元素边框（
outline: 1px solid red），确认它是否真没占位 - 若容器内部为空或子项被
position: absolute拉走，它自然高度为 0，不是 flex 的锅
flex-direction: column 时，容器高度不自动撑开怎么办
横向 flex（flex-direction: row）下，容器宽度由内容撑开；但纵向 flex 默认不自动拉高自身高度来包裹子项，尤其当父容器没设高度、且子项又没显式尺寸时，容易显得“缩成一条线”。
使用场景：侧边栏菜单、垂直堆叠卡片组、表单字段组 —— 都需要 flex 容器如实反映子项总高度。
- 确保父容器没设死
height或max-height，否则会截断 - 子项避免用
flex: 1单独撑高（它只在剩余空间里分配，不贡献基础高度） - 给容器加
min-height: min-content或min-height: fit-content（注意兼容性：IE 不支持后者） - 更稳妥的做法是让至少一个子项有明确高度（如
min-height: 24px），触发容器自然撑开
inline-flex 容器为什么看起来“消失”了
display: inline-flex 的容器确实仍在文本流中，但它表现得像一个“大号字符”：宽度由内容决定，换行行为和 inline 元素一致，上下 margin 不生效，vertical-align 影响对齐。
常见错误现象：两个 inline-flex 容器并排，中间有空隙；或它和旁边文字不对齐，像是“掉下去了”。
- 空格/换行符会被渲染为间隙，用
font-size: 0在父级临时消除，再单独设子项字体大小 - 加
vertical-align: top或vertical-align: middle解决基线对齐问题 - 如果需要上下 margin，改用
margin-top/margin-bottom并配合vertical-align微调，别依赖 margin 把它“顶出来” - 真要严格参与块级流，直接用
display: flex，别硬套inline-flex
flex 容器在 table-cell 或绝对定位父元素里失效
某些父级显示模式会压制 flex 布局能力：display: table-cell 下，子元素的 display: flex 会被忽略（浏览器强制降级为 block）；position: absolute 父容器虽不禁止 flex，但若没设宽高，flex 容器可能按“无约束”逻辑收缩到最小。
性能影响不大，但兼容性坑明显：Safari 旧版本对 table-cell > flex 支持极差，Chrome 也会静默退化。
- 查 DevTools 的 computed 样式，看
display是否真的生效（有时显示为flex，但 layout tab 显示为 block） - 避免把 flex 容器嵌在
table-cell、ruby或fieldset这类语义强约束的容器里 - 绝对定位父元素中，必须给 flex 容器设
top/left+ 显式width/height，或用inset配合min-width/min-height
最常被忽略的是：flex 容器自身的盒模型属性（box-sizing、padding、border）会影响它在流中的占位尺寸，但开发者往往只盯着子项 flex 属性调，忘了容器自己也可能被 box-sizing: border-box 或负 margin 扭曲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
