flex等高需父容器display: flex且子项无height限制；卡片内按钮吸底用flex-column+margin-top:auto；跨行等高须dom分组；防文本撑破需min-width:0和截断处理。
父容器必须设 display: flex 且子项不能设 height
Flex 实现等高，核心不是写 align-items: stretch（它默认就生效），而是确保父容器是真正的 Flex 容器，且卡片没被手动锁死高度。常见错误是只给 .card 加 display: flex，而忘了给它的直接父容器（比如 .card-list）加 display: flex。一旦某张卡片写了 height、max-height 或 min-height，拉伸立刻失效——它就“钉”在那个值上了。
务必检查：
- 父容器是否用了 display: flex（不是 inline-flex，也不是仅靠 Bootstrap 的 .row 默认行为，有些版本需显式加 d-flex）
- 所有卡片是否都没设任何高度相关属性
- 卡片没用 align-self 覆盖默认拉伸行为
卡片内部底部按钮对齐别用 position: absolute
文字少的卡片按钮上浮，不是高度问题，是内容没锚定。用 position: absolute 把按钮钉在底部，但父卡片没设 position: relative，按钮就脱离文档流，不参与高度计算，视觉上留白、错位。
正确做法是让卡片自身成为垂直 Flex 容器：
- 给 .card 加 display: flex; flex-direction: column; height: 100%
- 标题、描述保持正常流布局（不设 height、不加 position）
- 按钮加 margin-top: auto，自动吸到底部
- 若卡片内容区（如 .card-body）需要撑满剩余空间，再给它加 flex: 1
flex-wrap 换行后跨行不等高，得靠 DOM 分组
flex-wrap: wrap 启用后，浏览器把换行后的卡片当新行处理，align-items: stretch 只在当前行内生效。结果就是第一行三张卡按最高那张拉伸，第二行三张又按它们自己最高那张拉伸——两行高度可能完全不同。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
纯 CSS 无法跨行对齐高度。可靠解法只有结构隔离：
- 不要让整页容器直接 flex-wrap
- 用 JS 或服务端按每 N 张卡片包一层 .card-row
- 每个 .card-row 单独设 display: flex; gap: 12px
- 避免依赖“自动跨行等高”，Flexbox 就没这能力
移动端要防长文本撑破 flex 计算
长标题或未截断 URL 会触发浏览器默认的 min-width: auto 保护，导致某张卡片拒绝收缩，整行 flex 布局错乱，看起来“等高失效”。这不是 Flex 失效，是干扰项作祟。
关键防御点：
- 卡片加 min-width: 0（不是 min-width: auto）
- 标题用 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden 截两行
- 务必设 box-sizing: border-box，否则 padding 和 border 额外撑高，不同卡片尺寸不一致
- 小屏切 flex-direction: column 时，align-items: stretch 不再控制高度，此时等高本身已无意义，重点转为单列阅读体验
实际中真正难处理的，不是怎么写 Flex，而是哪些地方悄悄破坏了它——比如某处重置样式覆盖了 align-items，或者某张卡片里嵌了个 display: grid 但没设 height: 100%，又或者 IE11 下 flex: 1 在嵌套场景直接塌高。这些细节不排查干净，再多的 stretch 都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
