align-items: stretch 失效是因为子元素存在 height/min-height/max-height 或内容有固定高度；需父容器设显式高度，再配合 flex: 1（即 flex-basis: 0）实现等高。
flex 子元素高度不一致，align-items: stretch 没生效？
默认情况下 align-items: stretch 确实会让 flex 项目在交叉轴（通常是垂直方向）拉伸以填满容器高度，但**只要子元素设置了 height、min-height、max-height，或其内容自身有固定高度（比如图片、绝对定位元素），stretch 就会被忽略**。这不是 bug，是规范行为。
-
align-items: stretch只对「无明确高度约束」且「未设置align-self」的子元素起作用 - 如果父容器
display: flex但没设height，子元素即使 stretch 也只会撑到内容高度 —— 因为容器本身没“可 stretch 的空间” - 块级子元素内部有
position: absolute或float，也可能破坏正常高度计算
想让所有 flex 项高度统一，该用什么策略？
别只依赖 align-items。更可靠的方式是控制子元素自身高度逻辑：
- 给父容器显式设置
height（比如height: 300px或min-height: 100vh），再配合align-items: stretch - 对子元素统一设置
height: 100%或flex: 1（前提是父容器有确定高度） - 若需等高但内容高度不一，用
display: flex嵌套一层：子元素内部再设flex-direction: column+flex: 1控制内容区域高度 - 避免在子元素上写死
height或min-height，改用flex-basis配合flex-grow
.container {
display: flex;
height: 200px; /* 关键：必须有高度 */
align-items: stretch;
}
.item {
flex: 1; /* 等分主轴空间，同时允许 stretch 作用于交叉轴 */
border: 1px solid #ccc;
}
为什么加了 flex: 1 还是不等高？
常见原因不是 flex 写错了，而是父容器或祖先节点存在隐式高度限制：
- 父容器是
display: inline-flex，它不会自动占满行高，需额外设vertical-align: top或转为block - 子元素里有
img且没设height: 100%或object-fit，图片原始尺寸会撑开高度 - CSS 重置不彻底，比如
margin-bottom在段落末尾产生意外间距，导致实际高度不同 - 使用了
box-sizing: border-box但边框/内边距值不一致，视觉上看起来不等高
移动端或响应式场景下怎么稳住等高？
媒体查询中修改父容器 height 容易引发重排，更稳妥的是用 min-height + flex: 1 组合：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
min-height: 200px; /* 兜底最小高度 */
}
.item {
flex: 1;
display: flex;
flex-direction: column;
}
.item-content {
flex: 1; /* 让内容区自动撑满剩余空间 */
overflow: hidden;
}注意：flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写，真正起拉伸作用的是 flex-basis: 0 —— 它让所有子元素从“零基础高度”开始按比例分配空间，这才是等高的核心机制。
