flexbox是当前最可靠、最可控的响应式等高多列方案，但必须避开height/max-height/min-height和position: absolute这两类“隐形杀手”，否则align-items: stretch失效；卡片底部按钮对齐应使用flex-column+margin-top: auto；flex-wrap换行后需每行独立flex容器实现行内等高；ie11需加-ms-flexbox前缀或js补丁兜底。
Flexbox 是当前最可靠、最可控的响应式等高多列方案，但必须避开 height / max-height / min-height 和 position: absolute 这两类“隐形杀手”。
为什么 align-items: stretch 没生效？
这是最常见的失效原因：子项被手动限制了高度或脱离文档流。
-
height、max-height、min-height任一属性设在子列上，都会直接打断拉伸逻辑 -
position: absolute的子元素（比如卡片标题或按钮）不参与高度计算，导致视觉上“不等高” - 父容器没设
display: flex，或子项不是直接子元素（嵌套一层 div 就失效）
如何让卡片底部按钮对齐？
别用 position: absolute 把按钮钉在底部——它会让内容“消失”在高度计算之外。
- 给卡片加
display: flex; flex-direction: column; height: 100%; - 标题和正文保持默认流布局（不设 height，不加 position）
- 按钮加
margin-top: auto;，自动吸到底部
flex-wrap: wrap 后跨行不等高怎么办？
Flexbox 的 align-items: stretch 只在单行内生效，换行后每行各自拉伸，无法跨行对齐。
- 不要把整页容器设成
display: flex; flex-wrap: wrap; - 改用 DOM 分组：每行用独立的
display: flex容器包裹，例如每 3 张卡片包一个<div class="row"> <li>避免在卡片内部再嵌套 flex 容器（尤其 IE11 下 <code>-ms-flex-align: stretch易失效） - 必须加前缀：
display: -ms-flexbox; -ms-flex-align: stretch; - 更稳妥的做法是 JS 补丁：遍历所有卡片，取
offsetHeight最大值，统一赋给style.height -
grid-auto-rows: 1fr在 IE 中完全无效，别试
IE11 兼容性怎么兜底？
IE11 对 align-items: stretch 支持不稳定，尤其嵌套 flex 或含 flex: 1 时容易塌高。
真正难的不是写几行 CSS，而是判断哪些样式正在悄悄破坏高度同步——尤其是那些看似无害的 max-height: none 或 position: relative 里套 absolute 的组合。
