align-items: stretch在flex中默认生效但需父容器有交叉轴尺寸约束；grid中1fr不强制等高，需align-items: stretch配合容器高度；table布局语义差且响应式弱；JS同步高度属过早优化，仅特殊场景必要。
flex布局中align-items设为stretch是默认行为，但列高不等？
多数时候不是align-items没起作用，而是父容器没设height或min-height，导致子项“无参照可拉伸”。stretch只在交叉轴（对flex-direction: row来说是垂直方向）有明确尺寸约束时才生效。
实操建议：
- 确认父容器是
display: flex且flex-direction: row - 子项不要写
height、max-height或flex-shrink: 0（除非真需要固定高度） - 给父容器加
min-height: 1px（防空内容塌陷），或更实用的min-height: fit-content（Chrome 102+）或min-height: -webkit-min-content（Safari） - 避免子项内使用
position: absolute撑高父容器——它脱离文档流，flex无法感知其真实高度
grid布局用grid-template-rows: 1fr为什么列还是不等高？
1fr是分配剩余空间，不是强制等高。如果某列内容少、自身高度小，1fr会让它“按比例占位”，但不会把它往下拉——除非你用align-items: stretch（grid默认就是这个值）且容器有明确高度约束。
常见错误现象：grid-template-rows: 1fr写在列方向（即grid-template-columns）上，或误以为1fr能跨行拉齐所有列。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
display: grid+grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))做响应式多列，再配align-items: stretch（默认已有） - 若列内容高度差异大，加
min-height: 0到子项——防止内部溢出内容撑破1fr计算 - 别依赖
grid-row: span 2来“拉高其他列”，它只影响自身，不触发整体对齐
用table模拟多列等高是否还靠谱？
纯CSS方案里，display: table确实能天然等高，但现代项目中它已成兼容性兜底手段，不是首选。
问题在于：table布局语义错乱、响应式困难、无法用gap、不支持flex/grid的嵌套逻辑，且IE11以下对table-cell的vertical-align行为不一致。
实操建议：
- 仅当需支持IE10或更低版本，且列数固定、无复杂交互时考虑
display: table - 必须写
table-layout: fixed+ 显式width，否则列宽会随内容浮动，破坏布局预期 - 子项内若有
margin，会被table-cell忽略，得改用padding
JavaScript补救：监听resize并手动同步高度是否必要？
绝大多数场景下不必要。现代flex/grid已覆盖99%的等高需求；手写JS同步高度属于过早优化，且极易出bug：比如异步加载内容后忘记重算、Vue/React组件更新时机难捕捉、ResizeObserver兼容性（IE全不支持）。
只有两种情况值得考虑JS干预：
- 列内含
iframe或第三方富文本编辑器，其高度动态不可预测，且无法用CSS控制 - 需要精确匹配某列底部按钮的垂直位置（如卡片底部操作栏对齐），而CSS方案因字体渲染差异出现1px偏差
此时优先用ResizeObserver而非window.addEventListener('resize')，并加防抖（setTimeout延迟50ms）避免高频触发。
真正容易被忽略的是：等高只是表象，背后常混着“内容截断”“文字换行错位”“图片aspect-ratio失效”等问题。先确认是不是真需要视觉等高，还是只需底部对齐或留白一致——后者用margin-bottom: auto或padding-bottom往往更轻量。
