align-items: stretch失效主因是父容器无明确高度或子元素设了固定高/最小高；应设父容器height/min-height，子项用flex: 1替代height，IE11需height: 100%+flex: 1双保险。
flex容器里子元素高度不一致，align-items: stretch没生效？
默认情况下，align-items: stretch确实会让子元素在交叉轴（垂直方向）拉伸到容器高度，但前提是：子元素**没有设置固定高度、最小高度或溢出限制**，且父容器本身有明确高度。常见失效场景是父容器高度由内容撑开，此时“stretch”无参照物，所有子项退化为按内容高度排列。
- 检查父容器是否设置了
height或min-height（比如min-height: 100vh），否则stretch无从下手 - 子元素若写了
height: 200px、min-height: 100px或overflow: hidden，会阻止拉伸；删掉或改用flex: 1更安全 - 注意
display: flex必须作用在直接父容器上——如果中间夹了div但没设display: flex，等高就断在那一层
用 flex: 1 替代手动设高度更可靠
比起硬写 height: 100%，flex: 1 是更健壮的等高手段，它让子项主动参与剩余空间分配，不受父容器是否设高限制（只要父容器有可用高度即可）。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，关键在flex-basis: 0—— 它清空了子项原始高度基准，强制按比例分空间 - 多个子项都设
flex: 1，它们会均分剩余高度；想让某一项占更多，改flex: 2即可 - 如果子项内部有
padding或border，记得加box-sizing: border-box，否则可能撑出滚动条或溢出
```css
.container {
display: flex;
}
.item {
flex: 1; /* 不要写 height: 100% */
box-sizing: border-box;
}
```IE11 下 align-items: stretch 的兼容性坑
IE11 对 stretch 支持不完整：当子元素是 block 且未设 height 时，它有时会忽略拉伸，尤其在嵌套 flex 容器中。这不是 bug，是规范实现差异。
- 最稳方案：给子项统一加
height: 100%+flex: 1双保险（IE11 认得height: 100%，只要父容器有高） - 避免在 IE11 中依赖
min-height触发 stretch，它对min-height的处理比height更不可靠 - 如果项目必须支持 IE11 且布局复杂，考虑降级用
display: table-cell（但语义和响应式会变别扭）
内容超长时，等高布局反而导致文字被截断
等高后，如果某列文字很多而其他列很短，flex: 1 会让所有列强行拉到同一高度，但内容不会自动换行或隐藏——结果就是文字溢出、遮挡、或触发滚动条，视觉上反而失衡。
立即学习“前端免费学习笔记（深入）”；
- 加
overflow: auto或overflow-y: auto让过长内容可滚动，比截断更可控 - 用
word-break: break-word或overflow-wrap: break-word防止长英文/URL 撑破容器 - 如果业务允许，优先控制内容长度（比如用
line-clamp截断标题），而不是强求视觉等高
实际项目里，等高不是目的，信息清晰才是。很多人卡在“为什么没等高”，其实问题常出在父容器没高、子项锁死了高度、或者忘了 IE11 的 flex-basis 解析逻辑。
