Flex布局作用域仅限直接子元素，嵌套层需显式设置display: flex；align-items不影响子项内部对齐；inline元素需转为block或inline-flex才生效；flex: 1依赖父容器高度约束；IE11嵌套flex支持差，建议用-ms-flex或height: 100%兜底。
父容器设display: flex，子容器不会自动继承Flex上下文
很多人以为给父元素加了display: flex，它的子元素（哪怕嵌套多层）就天然处于Flex布局中——其实不是。Flex布局的“作用域”只作用于**直接子元素**，也就是flex-direction、justify-content这些属性只控制第一层子项的排列；第二层子元素如果想用Flex，必须自己显式声明display: flex。
常见错误现象：justify-content: center在父容器上写了，但中间那个包裹盒子没居中，里面文字却靠左——因为中间盒子是普通div，它只是被父容器当作一个“弹性项”排在中间，但它内部的子元素仍按普通文档流渲染。
- 要让嵌套层也受Flex控制，每一层需要独立设置
display: flex - 父容器的
align-items影响子项的交叉轴对齐，但不影响子项内部内容的对齐 - 如果子容器是
inline元素（比如span），即使父容器是Flex，它也不会变成弹性项，得先转成display: inline-flex或block
嵌套时flex缩写值容易误传，别依赖默认值
flex是flex-grow flex-shrink flex-basis的缩写，常被用在子项上。但很多人写flex: 1后发现嵌套层不按预期撑满，问题往往出在父容器没设高度，或嵌套子容器没设height: 100%。
使用场景：两栏布局里右侧再分上下两块，希望下块占剩余空间——这时flex: 1生效的前提是父容器有明确的高度约束（比如height: 100vh或flex-direction: column下的父容器已撑开）。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex: 1 1 0%，但若父容器未定义主轴尺寸（如width或height），收缩/拉伸可能失效 - 嵌套时，外层用
flex-direction: column，内层用row，注意flex-basis对应的是当前主轴方向的基准尺寸（column下看height，row下看width） - 避免写
flex: auto或flex: none后又期望它响应式撑开；它们会忽略flex-grow，直接按内容宽高渲染
IE11对嵌套Flex的支持差，flex: 1在子容器里大概率失效
IE11能识别display: flex，但对嵌套层级中的flex缩写支持极不稳定，尤其当父容器是flex-direction: column，子容器再用flex: 1试图占满剩余高度时，几乎必然塌陷。
错误信息典型表现：Computed height: 0px，开发者工具里看到元素存在但不可见，检查盒模型发现高度没计算出来。
- 兼容方案：外层用
display: -ms-flexbox，子容器改用-ms-flex: 1（注意前缀和语法差异） - 更稳妥的做法是避开IE下嵌套
flex: 1，改用height: 100%+ 显式min-height兜底 - 不要依赖
align-self在IE嵌套中居中——它经常被忽略，优先用margin: auto替代
用flex-wrap和align-content控制多行嵌套时，注意容器高度是否足够
当嵌套容器内子项过多触发换行（flex-wrap: wrap），想用align-content: space-between让行与行之间拉开距离，结果没反应——大概率是因为容器总高度不够，所有行被压缩在单行高度内，align-content根本没生效空间。
性能影响：开启flex-wrap后，浏览器需额外计算行数和每行尺寸，嵌套层数越多，重排成本越高，滚动区域里慎用。
-
align-content只在多行（或多列）时起作用，单行时完全无效 - 嵌套容器若同时设了
height和flex-wrap: wrap，需确保height大于单行所需高度，否则行为不可控 - 移动端Safari旧版本对
align-content支持不一致，测试时务必真机验证，别只看Chrome模拟器
嵌套Flex真正的复杂点不在属性本身，而在于每一层的尺寸来源是否清晰——父容器有没有给定主轴尺寸？子容器有没有脱离文档流？高度/宽度到底是继承、计算还是被重置？这些问题不厘清，flex再灵活也只会让你更难定位哪一层断掉了。
