父容器没高度导致Flex子元素不等高，因align-items: stretch需明确交叉轴尺寸；须设min-height: 100vh等显式高度，且子项不可写height/min-height，column布局下align-items控制宽度而非高度。
父容器没高度，Flex根本拉不动
写了 display: flex 却不等高，八成是父容器压根没提供可计算的高度基准。浏览器不会凭空“猜”你要多高，align-items: stretch 需要交叉轴（垂直方向）有明确尺寸才能生效。
常见失效场景：
- 父容器只写了
display: flex，但没设height、min-height，也没被上层容器用flex: 1分配空间 - 页面是 SPA，路由容器没设高度，
height: 100%在子组件里算出来是 0 -
html和body没加height: 100%，导致min-height: 100vh在某些嵌套层级下失效
实操建议：
- 优先用
min-height: 100vh—— 它比height: 100vh更稳，iOS Safari 地址栏动画时不会闪退 - 若需自适应内容又保底等高，写
min-height: fit-content，Safari 旧版加-webkit-min-content - 避免对父容器写
height: 100%，除非你确认每一层父级都有显式高度（漏一层就断链）
子项写了 height 或 flex: none，直接退出拉伸队列
align-items: stretch 是默认行为，但它非常脆弱：只要子项自己写了 height、max-height、min-height，或者用了 flex: none（即 flex: 0 0 auto），拉伸就立刻失效。
立即学习“前端免费学习笔记（深入）”；
典型误操作：
- 给卡片加了
height: 100%，以为能撑满 —— 实际上它在无父高时 fallback 到height: auto，但已干扰 stretch - 图片没约束：
<img src="...">原始尺寸大，单列被撑高，其他列跟着被拉，视觉错乱 - 用了
align-self: flex-start或display: table-cell，显式覆盖对齐方式
实操建议：
- 子项一律删掉
height、max-height、flex: none - 含
<img>的列，加img { height: 100%; object-fit: cover; }，并确保父容器box-sizing: border-box - 需要固定宽度的左栏，用
flex: 0 0 240px，不是width: 240px—— 后者可能被内容挤变形
Flex-direction: column 会彻底搞反拉伸方向
想让左右两栏等高，却写了 flex-direction: column，结果所有列垂直堆叠、各自占满容器高度——这不是等高，是错用。
关键区别：
-
flex-direction: row（默认）：主轴水平，交叉轴垂直 →align-items控制高度拉伸 -
flex-direction: column：主轴垂直，交叉轴水平 →align-items控制的是**宽度对齐**，和高度无关
实操建议：
- 两栏/多栏横向布局，别动
flex-direction，保持默认row - 如果真要纵向排列（比如上下两块区域），想让它们等宽，才用
column+align-items: stretch - Bootstrap 4 的
.row默认不是 Flex 容器，必须手动加d-flex类；Bootstrap 5 虽默认是flex，但检查是否被内联样式覆盖
内容不对齐？等高只是起点，不是终点
等高后，短内容列底部留白、长内容列按钮悬空或文字被截断，这和“是否等高”无关，而是子项内部内容没合理分布。
常见问题：
- 卡片底部按钮靠
position: absolute; bottom: 0，但该卡片因摘要短，实际高度小，按钮就悬在半空 - 用了
overflow: hidden截断内容，用户看不到底部 —— 这不是 Flex 的锅 - 响应式换行（
flex-wrap: wrap）后，stretch只在每行内生效，跨行不拉齐
实操建议：
- 子项内部启用
display: flex; flex-direction: column，再用margin-top: auto把按钮“推”到底部 - 长内容区域加
min-height+overflow: auto，而不是height截断 - 移动端软键盘弹出、图片异步加载时，初始渲染易塌陷 —— 给
<img>加height: auto; max-width: 100%，同时确保其父容器有min-height
真正难的不是写对那几行 CSS，而是在地址栏收起、图片还没加载、软键盘刚弹出这些瞬间，align-items: stretch 依然有高度可依、有内容可拉。
