flex子元素默认等高需父容器设display: flex且子项未设height/min-height/max-height；绝对定位内容会脱离文档流导致视觉不等高；flex-wrap换行后跨行不等高，须用dom分组解决。
父容器必须设为 display: flex，子卡片不能设 height
等高效果只在 Flex 容器的直接子项上生效，align-items: stretch 是默认行为，但前提是子项没被手动限制高度。常见错误是给 .card 加了 height、max-height 或 min-height —— 这会直接打断拉伸逻辑，卡片就“卡”在那个值上了。
还要注意：子项内部若用了 position: absolute 的标题或按钮，内容脱离文档流，不参与高度计算，也会导致视觉上不等高。解决办法是删掉绝对定位，改用 margin-top: auto 推到底部（见后文）。
卡片内底部按钮固定对齐，别用 position: absolute
文字少的卡片按钮上浮，不是高度问题，是内容没“锚定”。强行设 height 反而破坏响应性。
-
.card设display: flex; flex-direction: column; height: 100%; - 标题和描述保持正常流布局（不设
height、不加position） - 按钮加
margin-top: auto;，自动吸到底部
这样即使某张卡片只有两行字，按钮位置也和其他卡片一致，等高感更强。
flex-wrap 换行后，第二行卡片不再和第一行等高
flex-wrap: wrap 启用后，浏览器把换行后的卡片当新“行”处理，align-items: stretch 只在当前行内生效。结果就是每行各自找最高卡片拉伸，跨行不对齐。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
可靠解法是结构隔离：
- 服务端或 JS 按每 3 张（或其他数量）包一层
.card-row - 每个
.card-row单独设display: flex和gap - 避免整页容器直接
flex-wrap，那是自找麻烦
不要指望 CSS 自动跨行对齐——Flexbox 没这个能力，得靠 DOM 分组。
IE11 下 align-items: stretch 不稳定，别硬扛
IE11 对嵌套 Flex 或含 flex: 1 的场景，align-items: stretch 经常失效，尤其卡片内再套 Flex 时容易塌高。
务实方案只有两个：
- 加前缀：
display: -ms-flexbox; -ms-flex-align: stretch; - JS 补丁：遍历所有卡片，取
offsetHeight最大值，统一赋给style.height
Grid 的 grid-auto-rows: 1fr 在 IE 中完全不识别，所以别试。真要全兼容 IE11，Flex + 前缀仍是唯一可行路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
