Flex布局作用域仅限直接子元素嵌套层需显式设置display: flexalign-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下看heightrow下看width避免写flex: auto或flex: none后又期望它响应式撑开它们会忽略flex-grow直接按内容宽高渲染IE11对嵌套Flex的支持差flex: 1在子容器里大概率失效IE11能识别display: flex但对嵌套层级中的flex缩写支持极不稳定尤其当父容器是flex-direction: column子容器再用flex: 1试图占满剩余高度时几乎必然塌陷。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。