align-items: stretch 使子项等高需容器在交叉轴有明确高度，如 height 或 flex: 1；子项不能设 height/min-height/max-height 或 align-self 覆盖；否则拉伸失效。
align-items: stretch 是怎么让子项等高的
align-items: stretch 是 Flex 容器的默认值，它会让所有未设置明确高度（或 min-height/max-height）的 Flex 子项，在交叉轴方向“拉伸”以填满容器高度。关键在于：这个拉伸是基于**容器当前高度**计算的——如果容器高度由内容撑开，那拉伸效果就不可见；只有当容器有明确高度（比如 height: 400px）或被父级约束（如 flex: 1 在嵌套 Flex 中），align-items: stretch 才会真正生效。
常见误区是以为只要写了 display: flex 就自动等高，其实漏掉了容器高度来源。浏览器不会“猜”你想要多高，它只按规则拉伸。
不写 height 也能等高？靠父容器是 Flex 且设了 flex: 1
实际项目中，多数等高需求出现在卡片列表、侧边栏+主内容这类占满视口的布局里。这时不用给子容器硬写 height，而是让父 Flex 容器自身参与弹性分配：
- 外层容器设
display: flex; flex-direction: column;，并给它height: 100vh或min-height: 100vh - 中间区域（比如主内容区）设
flex: 1，它会占据剩余空间 - 在这个
flex: 1区域内部再设display: flex，子项就会基于该区域高度拉伸
示例结构：
.layout { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; display: flex; } /* ← 这个高度由 flex: 1 决定 */
.card { flex: 1; } /* ← 这些 card 会等高 */
为什么加了 align-items: stretch 还不等高
最常踩的坑集中在三类干扰项：
立即学习“前端免费学习笔记（深入）”；
- 子项设置了
height、min-height或max-height—— 只要任一值存在，stretch就失效，改用该值作为基准 - 子项用了
align-self: flex-start等覆盖值，单个子项脱离 stretch 行为 - 容器本身没有交叉轴尺寸（比如
flex-direction: row时，交叉轴是垂直方向，但容器没设height或未被撑开）
调试时可临时加 outline: 1px solid red 到子项，观察是否真被拉伸；再检查 computed styles 里 align-self 是否为 stretch，以及容器的 height 是否为具体数值而非 auto。
等高但内容溢出怎么办：用 min-height 替代 height
强行等高后，短内容卡片留白、长内容卡片文字被截断，这是典型副作用。解决思路不是取消等高，而是允许子项“至少”等高，但能随内容增长：
- 去掉子项的
height，改用min-height: 0（注意：Flex 子项默认min-height: auto，会阻止收缩，有时需显式设为0） - 对内容区使用
overflow-y: auto或flex: 1再包裹一层，把滚动限制在局部 - 更稳妥的做法是：等高靠
align-items: stretch，内容自适应靠子项内部的display: flex; flex-direction: column+flex: 1分配空间
复杂点往往不在 stretch 本身，而在于你是否清楚「谁的高度被谁决定」——容器高度来源、子项约束条件、嵌套层级中的 flex 值传递，这三个地方错一个，等高就失效。
