align-items: stretch 默认生效但常“失效”，因父容器无高度、子项设了height或被align-self覆盖；需确保父容器有明确高度、子项无交叉轴尺寸限制、box-sizing: border-box及图片设height: 100%。
align-items: stretch 默认就生效，但多数时候它“看起来没用”，是因为父容器没高度、子项写了 height、或被 align-self 覆盖了。
为什么 align-items: stretch 没拉齐高度
Flex 容器默认就是 align-items: stretch，但它只对“没设交叉轴尺寸”的子项起作用。在 flex-direction: row（默认）下，交叉轴是垂直方向，所以子项不能有 height、min-height、max-height（值不是 auto），否则拉伸直接失效。
常见干扰点：
- 父容器高度为
auto，没有明确height或min-height，stretch 就失去参照基准 - 某个子项写了
align-self: flex-start，覆盖了父级的 stretch 行为 - 子项里有
img且没加height: 100%，替换元素自带固有尺寸，会阻断拉伸 - 用了
box-sizing: content-box（默认），而padding和border会额外撑高，导致视觉不齐
让所有子项真正等高的最小可行配置
不需要改结构，只需清理样式并补上关键约束：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
display: flex和明确高度，例如min-height: 200px - 移除所有子项上的
height、min-height、max-height - 确保子项没写
align-self，或显式重置为align-self: stretch - 所有子项加
box-sizing: border-box，把padding和border算进高度内 - 图片类子项补
height: 100%; object-fit: cover，避免比例失真又撑高
示例：
.container {
display: flex;
min-height: 240px;
}
.item {
flex: 1;
padding: 16px;
border: 1px solid #eee;
box-sizing: border-box;
}
.item img {
height: 100%;
object-fit: cover;
width: 100%;
}
flex: 1 比 align-items: stretch 更稳的场景
当内容高度差异大、或存在 margin 干扰、或需要忽略子项自身高度时，flex: 1 是更主动的解法。它让子项平分容器剩余空间，和内容无关。
-
flex: 1等价于flex: 1 1 0，其中flex-basis: 0会忽略height声明，强制从零开始分配空间 - 如果子项本来就有
height: 200px，又想让它参与等高，必须改成flex: 1 1 auto或删掉height - 注意：在 IE10–11 中，
flex: 1必须展开写成flex-grow: 1; flex-shrink: 1; flex-basis: 0%，否则不生效 - 慎用
flex-shrink: 0——它会让子项拒绝压缩，破坏等高逻辑
调试时最容易被忽略的三件事
不是代码没写对，而是这些细节让效果“看似失效”：
- 用
outline: 1px solid red查看真实边界，别用border——它会增加盒模型尺寸，干扰 flex 计算 - 检查是否误设了
flex-direction: column，这会让主轴变垂直，align-items控制的就变成宽度而非高度 - 移动端要留意系统字号放大、
text-size-adjust或微信内置浏览器对行高的影响，min-height比height更抗干扰
