align-items: stretch未生效是因为父容器缺乏交叉轴尺寸基准或子项锁死高度；移动端需用min-height: 100vh替代height: 100vh，子项禁用height/min-height: 100%，改用flex: 1，并确保嵌套结构中每层均有高度传递。
align-items: stretch 为什么没生效
这不是属性失效，而是它失去了作用前提：它只在父容器有交叉轴尺寸基准、子项没锁死自身高度时才起效。移动端常见失效场景包括：
- 父容器用
height: 100vh—— iOS Safari 地址栏收起/展开时 viewport 高度重算，100vh可能瞬间归零，导致 stretch 失去拉伸依据 - 子项写了
height: 100%或min-height: 100%—— 直接覆盖 stretch 行为，等高逻辑被手动中断 - 用了
flex-direction: column却还指望“等高”——此时align-items: stretch拉伸的是宽度，不是高度 - 图片异步加载未设占位，
<img>初始高度为 0，父容器塌缩，stretch 无高度可依
移动端必须加的两个兜底控制
仅靠默认 stretch 不足以应对软键盘弹出、横竖屏切换、系统缩放等真实干扰。实操上必须做两件事：
- 父容器统一用
min-height: 100vh，而非height: 100vh；min-height能扛住 viewport 动态变化，避免闪退或塌陷 - 子项禁用
height: 100%和min-height: 100%，改用flex: 1（影响主轴）+ 保持交叉轴自然 stretch；若需最小高度，用min-height: 44px这类绝对值，不依赖相对单位 -
<img>必须加height: auto和max-width: 100%，其直接父容器设min-height: 44px或更高，防初始抖动
嵌套 flex 容器里等高失效怎么办
外层 flex 不等于内层子项自动等高。比如侧边栏 + 主内容这种结构，常见错误是只在外层设 display: flex，但主内容区没占满剩余空间：
- 外层容器需设
min-height: 100vh，且内部<main></main>加flex-1（即flex: 1）才能撑开高度基准 - 主内容区内部再设
display: flex，此时它的子项才有统一的 stretch 参考高度 - 慎用
position: sticky或fixed嵌套在 flex 子项里——它们脱离文档流，会让 stretch 失去计算依据 - Tailwind 用户注意：
items-stretch是默认值，显式写出来通常没必要；失效多因 class 顺序覆盖，比如h-24或self-start直接关掉了 stretch
Flex 和 Grid 在等高上的分工差异
别混淆适用场景：Flex 的 align-items: stretch 解决的是“单行内等高”，Grid 的 grid-auto-rows 才解决“多行全局等高”。移动端选型要看结构：
- 双栏横向布局（如侧边栏+正文）、卡片行展示 → 用 Flex，靠
min-height: 100vh+flex: 1+ 自然 stretch - 多行卡片网格、仪表盘指标组、周历视图 → 用 Grid，例如
grid grid-cols-2 grid-auto-rows-fr，每行按最高项均分高度 - 小屏堆叠时，别只切
sm:flex-col，还得配sm:items-start—— 否则items-stretch在 column 下继续拉伸宽度，造成视觉错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
