弹性盒子仅作用于直接子元素，不穿透嵌套层级；display: flex 仅影响直系子元素，孙级及更深层元素不受控制，绝对定位子元素脱离 flex 布局，margin: auto 居中需满足无固定尺寸约束等前提。
弹性盒子只作用于直接子元素
弹性布局不会穿透嵌套层级，display: flex 只影响其**直系子元素**（即 immediate children），孙级或更深层的元素完全不受父容器的 flex 属性控制。常见错误是给一个深层 div 设置了 margin: auto 或期望它响应 justify-content，结果无效——因为它根本不是弹性容器的直接子元素。
实操建议：
- 检查 DOM 结构：用浏览器开发者工具确认目标元素是否为
display: flex容器的直接子节点 - 若需对深层元素启用弹性行为，必须在其**最近的父级容器**上也设置
display: flex - 避免误用：不要指望
align-items或flex-grow对非直系子元素生效
子元素无需预设 display 类型
弹性子元素会自动忽略自身原本的 display 值（比如 inline、block、inline-block），统一按 flex item 规则渲染。这意味着你不需要、也不应该手动给子元素加 display: block 来“修复”布局。
但要注意：
-
float、clear、vertical-align在 flex item 上完全失效 - 子元素的
width和height仍可设置，且生效（这点和普通 inline 元素不同） - 如果子元素是
<img>或<span></span>这类默认 inline 的元素，直接设width不会触发块级行为，但在 flex 容器里它就能正常接受尺寸控制
子元素不能是绝对定位脱离文档流的元素
当子元素设置了 position: absolute，它就不再是 flex item，不再参与 flex 布局计算，justify-content、align-items、flex 相关属性对其无效，它只受 top/left 等定位属性控制。
典型陷阱：
- 在 flex 容器里混用
position: absolute和margin: auto试图居中——后者不起作用 - 以为
align-self: center能调整绝对定位子元素的位置——实际被忽略 - 想让某个子元素“浮出”布局又保留 flex 对齐逻辑，应改用
transform: translate()配合相对定位
子元素的 margin:auto 行为有前提条件
margin: auto 在 flex 容器中能实现单个子元素的主轴+交叉轴居中，但前提是：该子元素**不能同时在对应轴向上设置了固定尺寸约束**。
例如：
- 主轴为
row（水平）时，子元素不能设width: 100%或flex: 0 0 100%，否则margin: auto水平方向失效 - 侧轴为
column（垂直）时，子元素不能设height: 100%，否则垂直居中失败 - 最稳妥写法：
margin: auto+ 不设宽高 + 父容器有明确尺寸（如height: 300px）
position: absolute，整个对齐逻辑就彻底失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
