Flexbox子项高度不一致时，需设置父容器明确高度或min-height，并用align-items: stretch拉齐；子项内用display: flex、flex: 1 1 auto及min-height确保等高，IE11需避免flex: 1简写。
Flexbox子项高度不一致？用 align-items 统一拉齐
默认情况下，Flex容器里的子项（比如卡片）高度由各自内容决定，哪怕设置了相同 height: 100% 也没用——因为父容器没固定高度，百分比失效。真正起作用的是 align-items 属性。
-
align-items: stretch是默认值，会让子项在交叉轴（通常是垂直方向）上自动拉伸填满容器高度，前提是容器本身有明确高度或能撑开 - 如果父容器高度依赖内容（比如没设
min-height或height），stretch就没效果，得先让容器“有高度可填” - 别用
align-items: center或flex-start来“凑齐高度”，那只会让子项居中或靠上，高度依然参差
卡片内容高度不固定时，用 min-height + flex: 1 强制等高
光靠 align-items: stretch 不够，尤其当卡片里有标题、描述、按钮等不同行数的内容时，必须让每个卡片内部也“愿意撑高”。关键在子项自身样式。
- 给每张卡片加
display: flex; flex-direction: column;，再给内容区域（比如文字区）设flex: 1，它就会吃掉剩余空间，把底部按钮“顶”到最底下 - 卡片容器必须设
min-height（比如min-height: 200px），否则flex: 1没参考基准，还是按内容高度走 - 避免对卡片直接设
height: 200px，否则内容超长会溢出或被裁剪；min-height更安全
IE11兼容性问题：flex: 1 行为异常，改用 flex: 1 1 auto
IE11对 flex: 1 的解析和现代浏览器不一致，常导致卡片高度塌缩或错位。这不是bug，是规范实现差异。
- 显式写全
flex: 1 1 auto（即flex-grow: 1; flex-shrink: 1; flex-basis: auto），IE11能正确识别并拉伸 - 别依赖
flex: 1简写，尤其在需要等高的卡片布局中，这是IE11下最常踩的坑 - 如果项目必须支持IE11，建议所有卡片子容器都加
flex: 1 1 auto，而不是只在内容区加
响应式断点下高度重排失效？检查 flex-wrap 和容器宽度
小屏幕换行后，卡片变成多行，align-items 只作用于单行内，不同行的卡片高度不会互相拉齐——这是Flexbox设计使然，不是写错了。
立即学习“前端免费学习笔记（深入）”；
- 如果要求跨行等高，不能靠
flex-wrap: wrap，得改用display: grid，或者 JavaScript 计算最大高度再赋值（不推荐） - 更实际的做法：在断点处取消换行（
flex-wrap: nowrap），配合横向滚动，或改用 CSS Grid 的grid-template-rows: 1fr - 别在媒体查询里只改
align-items，它解决不了跨行不一致的问题
真正卡住人的地方往往不在 Flexbox 语法本身，而在于「容器有没有可参照的高度」和「IE11对简写属性的宽容度」。这两个点漏掉一个，卡片就永远不齐。
