移动端两栏等高布局靠 align-items: stretch 实现，但需父容器有高度基准（如 min-h-screen）、子项未锁定高度；flex 失效主因是交叉轴无尺寸依据，grid 更适合多行全局等高。
移动端两栏等高布局，靠 align-items: stretch 就够了——但前提是父容器有可依的高度基准，且子项没主动锁死高度。
为什么写了 display: flex 却不等高？
这不是 Flex 失效，而是它没“高度”可拉。浏览器需要一个交叉轴（默认是垂直方向）的尺寸作为 stretch 的依据：
-
min-height: 100vh比height: 100vh更安全：Safari 在地址栏收起/展开时会重绘 viewport，height: 100vh可能瞬间归零，导致塌陷 - 父容器若只是
display: flex但外层没撑开（比如上层是div且没设高度），computed height 就是auto或0px，stretch 无从下手 - 子项写了
height: 100%、min-height: 100%或flex-shrink: 0配合固定尺寸，会直接覆盖 stretch 行为 -
flex-direction: column下，align-items: stretch拉伸的是宽度，不是高度——此时“等高”需靠主轴分配（如flex: 1）配合外部高度约束
用 Tailwind 写等高两栏时，items-stretch 为什么没生效？
Tailwind 的 items-stretch 是默认值，显式写出来通常没必要。失效原因和原生 CSS 一致，但容易被 class 顺序或响应式断点掩盖：
- 别只加
flex和items-stretch，必须同步确保父容器有高度来源：比如min-h-screen或嵌套在flex-1区域内 - 子项用了
h-24、min-h-32、self-start这类 class，就等于手动关闭 stretch - 小屏堆叠时，别只切
sm:flex-col，还得配sm:items-start——否则items-stretch在 column 下继续拉伸宽度，造成视觉错乱 - 嵌套场景（如侧边栏 + 主内容）中，仅外层
flex不够：要让主区域用flex-1占满剩余空间，再在其内部设flex，子项才有统一拉伸基准
图片加载延迟导致初始高度塌陷怎么办？
异步加载的 <img> 没尺寸时占位为 0，父容器高度塌缩，stretch 失效；等图加载完又突然撑开，引发抖动：
- 给
<img>加height: auto和max-width: 100%，避免宽高比失控 - 其直接父容器必须设
min-height（如min-h-44），不能依赖内容撑开 - 慎用
position: sticky或fixed嵌套在 flex 子项里——它们脱离文档流，可能让 stretch 失去计算依据 - 软键盘弹出时，iOS viewport 高度剧变，
min-h-screen仍有效，但若用了vh相关计算（如calc(100vh - 60px)），需 JS 动态监听resize或focusin/focusout修正
Flex 等高和 Grid 等高的关键区别在哪？
选哪个不看“谁更先进”，而看你要解决的是“单行内等高”还是“多行全局等高”：
-
display: flex：适合单行两栏，靠align-items: stretch拉伸交叉轴。优点是语义清晰、兼容好（Chrome 29+/Safari 6.1+）；缺点是换行后各行高度独立，无法跨行对齐 -
display: grid：用grid-auto-rows: 1fr或grid-template-rows: 1fr定义轨道高度，所有行都按最高项等分。适合卡片列表、仪表盘指标等多行场景；但 Safari ≤15.4 对1fr在grid-auto-rows中支持有 bug，建议降级为minmax(0, 1fr) - 别混用：Grid 容器里嵌套 Flex 子项没问题，但 Flex 容器里用
display: grid做子项等高，反而绕远路——子项高度由 Grid 自己管，Flex 的 stretch 就失效了
真正难的不是写对那行 display: flex，而是在软键盘弹出、横竖屏切换、图片异步加载这些时刻，stretch 依然有高度可依、有内容可撑、有渲染可稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
