align-self没生效的根本原因是父容器未启用flex布局或交叉轴无可用空间。需检查display:flex、flex-direction、父级高度约束、中间层min-height/min-width设置及box-sizing影响。
flex子项的align-self为什么没生效？
因为父容器没开display: flex，或者开了但没设align-items（影响默认对齐），更常见的是：父容器本身是某个flex项目的子项，而它的父级又没给它分配足够空间——此时align-self只能在「可用交叉轴空间」内起作用，没空间就等于白设。
- 检查父容器是否真的启用了flex布局：
display: flex或display: inline-flex - 确认父容器的
flex-direction：若为row，交叉轴是垂直方向，align-self才控制上下对齐；若为column，交叉轴变水平，align-self控制左右 - 父容器若被上层flex项目约束了高度（比如
flex: 1但外层没给高度），它自身高度可能塌缩，导致子项无空间可对齐
嵌套flex中flex: 1不拉伸，只在最外层生效？
不是“只在外层生效”，而是flex: 1依赖父容器提供剩余空间，而中间某层容器若没显式设height或min-height，浏览器无法计算“剩余”，于是拉伸链中断。
- 典型断点：中间层是
div，父级是flex: 1，但它自己没设height: 0或min-height: 0，导致其高度由内容撑开，不参与剩余空间分配 - 修复方式：给所有中间flex容器加
min-height: 0（对列主轴）或min-width: 0（对行主轴），强制它允许收缩 - 注意
overflow影响：若中间容器有overflow: hidden，某些浏览器会隐式添加min-width: 0，但别依赖这个，手动写更稳
用align-items: stretch时，子元素高度被意外截断
stretch的拉伸前提是子元素在交叉轴方向没有固定尺寸（如height、max-height、border、padding叠加后超限），一旦存在硬性限制，拉伸就失效，且不会报错。
- 检查子元素是否设置了
height、max-height、vertical-align（对inline元素有干扰） - 留意
box-sizing：若为content-box，且父容器高度刚好等于子元素内容高+padding+border，那实际已无拉伸余量 - 调试技巧：临时加
outline: 1px solid red看子元素真实占位，比border更不影响布局
Chrome和Firefox对嵌套flex拉伸行为不一致？
差异主要集中在min-height: auto的处理上。Firefox较早版本会把min-height: auto解释为“至少包含内容高度”，而Chrome（尤其v100+）更严格遵循规范，允许它收缩为0——这会导致同一套代码在两浏览器中，中间层flex容器高度不同，进而影响下层拉伸。
立即学习“前端免费学习笔记（深入）”；
- 兼容写法：显式声明
min-height: 0而非依赖auto - 避免用
height: 100%替代flex: 1，百分比高度在flex嵌套中行为更不可控 - 如果必须兼容老Firefox，可在中间容器加
flex-shrink: 1并配min-height: 0双保险
嵌套越深，拉伸行为越依赖每一层的min-height/min-width、box-sizing和父级是否真有剩余空间——这些细节不报错，也不警告，只默默让布局“看起来不对”。
