align-items: stretch 失效主因是容器无明确高度、子元素设了 height/flex-shrink:0/align-self 或存在视觉错觉；解决需设容器 min-height、子元素用 flex:1、避免覆盖属性，并注意 Safari/IE 兼容性。
flex 容器中子元素高度不一致，align-items: stretch 没生效？
默认情况下 align-items: stretch 确实会让 flex 项目在交叉轴（通常是垂直方向）拉伸到容器高度，但前提是：容器本身有明确高度，且子元素没设置 min-height、height、flex-shrink: 0 或 align-self 覆盖。常见失效场景包括：
- 父容器没设
height或min-height，仅靠内容撑开 —— 此时 stretch 失去参照基准 - 子元素设置了
height: auto以外的固定值，或flex-shrink: 0阻止收缩 - 某个子项写了
align-self: flex-start，覆盖了容器级的align-items - 子元素是
display: block的普通块级元素（如），内部文字换行导致视觉高度不一，但实际 flex 高度已拉齐 —— 这属于「视觉错觉」，需检查 computed height
多列文本等高最稳的 flex 写法
目标是让每列（如三栏卡片）底部对齐、高度一致，且内容可自由伸缩。关键不是只加 align-items: stretch，而是组合控制：
- 父容器设
display: flex+align-items: stretch（默认值，可省略） - 确保父容器有明确高度约束，比如
min-height: 300px或由上下文撑开（如全屏布局中用height: 100vh） - 子元素避免写死
height，改用flex: 1让其自动填满可用空间 - 若子元素内有标题、正文、按钮等不同高度内容，给它们统一加
margin-bottom: auto或用display: flex; flex-direction: column+justify-content: space-between控制内部对齐
.columns {
display: flex;
min-height: 200px; /* 必须有高度基准 */
}
.column {
flex: 1;
margin: 0 8px;
display: flex;
flex-direction: column;
}
.column__content {
flex: 1;
}
.column__footer {
margin-top: auto;
}
为什么不用 display: grid？
Grid 确实更直接：grid-template-rows: 1fr 就能强制所有行等高，但如果你已在用 flex 布局，或需要兼容老版本 Safari（flex: 1 在 Safari 9–13.1 有 flex-basis 计算 bug），就得小心处理。尤其注意：
- Safari 中若子元素含
padding或border，flex: 1可能计算错误，建议加box-sizing: border-box - IE11 对
align-items: stretch支持不稳定，若需兼容，得 fallback 到 JS 测量或display: table-cell - 如果列数动态（如响应式从 3 列变 1 列），flex 更易配合
flex-wrap和媒体查询，grid 则需重写grid-template-columns
检查是否真等高：别只看渲染结果
浏览器开发者工具里看到「看起来一样高」≠ 实际 DOM 高度相等。容易被忽略的是：
立即学习“前端免费学习笔记（深入）”；
-
line-height和font-size不同导致基线错位，用vertical-align: top统一对齐起点 - 子元素最后一个子节点（如
）默认有margin-bottom，会撑高容器，需重置margin: 0 - 用了
rem或em单位时，根字体大小变化会影响所有列的高度计算，建议用px或vh做基准 - 某些 CSS 框架（如 Bootstrap）会给
.card加height: 100%，反而锁死高度，要检查 computed styles 中的最终 height 值
