flex容器的align-items只作用于直接子项，嵌套时每层需单独设置对齐方式；主轴方向改变后justify-content与align-items功能互换；IE11对多层嵌套支持差，建议降级方案。
flex容器的align-items默认不继承
子容器设了display: flex，但里面的子项没按预期垂直居中？大概率是父级align-items没生效——它只作用于**直接子项**，不会穿透到孙子级。嵌套后每一层都得单独配对齐方式。
- 父容器用
align-items: center，只影响它的直接子元素（即中间那层flex容器）的位置，不影响孙子元素 - 中间那层flex容器也得显式设
align-items: center，才能让它自己的子项（也就是最终内容）垂直居中 - 如果中间层是
flex-direction: column，那align-items控制的是**水平对齐**，别和justify-content搞混
justify-content和align-items在嵌套中角色易反串
写两层flex时，常把“主轴”和“交叉轴”记混，尤其第二层方向变了之后。比如外层flex-direction: row（主轴水平），内层改成column（主轴变垂直），这时原来管“水平居中”的justify-content，到了内层就变成管“垂直居中”了。
- 外层
justify-content: center→ 水平居中中间容器 - 内层
justify-content: center→ 垂直居中它的子项（因为主轴已是vertical） - 内层
align-items: flex-start→ 控制这些子项的**水平位置**（交叉轴是horizontal） - 不写
align-items时，默认值是stretch，可能把按钮/文字撑满整行，看着像错位
嵌套flex导致margin塌陷或尺寸失控
Flex项默认min-width: auto和min-height: auto，嵌套多层后，浏览器会不断尝试收缩内容，有时让文字换行、图标变形，甚至出现滚动条。
- 给关键子容器加
min-width: 0或min-height: 0，防止它被flex强行压缩 - 文字容器记得加
white-space: nowrap或overflow: hidden，避免flex撑宽后文本溢出 - 图标类
<img alt="CSS如何控制嵌套弹性盒子的对齐_利用逐级flex嵌套实现复杂UI" >或<svg></svg>建议设flex: 0 0 auto，禁止缩放 - Chrome下某些嵌套组合会触发
flex-basis: auto计算异常，显式写flex-basis: 0更稳
IE11对嵌套flex的支持断层明显
IE11能跑单层flex，但遇到两层以上+align-items+flex-wrap组合，经常错位、截断或忽略justify-content。不是bug，是规范实现不全。
立即学习“前端免费学习笔记（深入）”；
-
align-items: stretch在IE11里对非块级子元素（如<span></span>）无效 - 嵌套中用了
flex: 1，IE11可能让某一层完全消失，换成flex: 1 1 0更可靠 - 如果必须兼容IE11，建议用
display: -ms-flexbox前缀，并避免三层及以上嵌套 - 真要复杂布局，不如在外层用flex，内层回归
display: block+margin: auto或position: absolute
