flexbox实现多列等高卡片需父容器设display: flex且flex-direction: row（默认），子项不设height/min-height，依赖align-items: stretch默认拉伸；若flex-direction: column则拉伸宽度而非高度，且须确保父容器有min-height等高度基准。
Flexbox容器必须设为display: flex且方向为列
卡片等高不是靠单个卡片设置高度，而是靠父容器启用Flex布局并让子项沿主轴拉伸。如果父容器是display: flex但没指定flex-direction，默认是row（横向），此时子项不会“等高”，而是等宽——这是最常见的误判点。
正确做法是显式声明：flex-direction: column（当卡片垂直堆叠）或保持默认row（当卡片水平排列），再配合align-items: stretch（默认值，通常不用写）。
- 若卡片横向排列（一行多张），父容器用
display: flex+flex-wrap: wrap，子项不设height，靠align-items: stretch自动等高 - 若卡片纵向排列（一列多张），需额外加
flex-direction: column，此时等高逻辑依然成立，但要注意子项的flex行为是否被min-height或height覆盖 - 避免在子项上写
height: 100%——它依赖父容器有明确高度，而Flex容器本身往往没有固定height，会导致失效
子卡片必须设flex: 1或flex: auto
只设父容器为display: flex还不够。默认子项的flex值是0 1 auto，意味着不放大（flex-grow: 0）、可缩小、基准尺寸按内容定——这会导致高度不一致。
要让所有卡片高度跟随最高那个，关键在flex-grow: 1。最简写法就是flex: 1，它等价于flex: 1 1 0，强制子项在剩余空间内等比拉伸。
-
flex: 1适用于卡片内容高度差异大、且希望严格等高的场景 -
flex: auto（即flex: 0 1 auto）适合保留内容原始高度，仅在必要时拉伸，但无法保证绝对等高 - 慎用
flex: 1 1 auto——第二个1表示flex-shrink: 1，可能在小屏下把卡片压扁，建议改用flex: 1 0 auto来禁用压缩
内容溢出和min-height会破坏等高效果
即使flex: 1生效，如果某张卡片内部有min-height: 300px，而其他卡片内容少，那这张就会撑高整个行（或列），其余卡片被迫跟着变高——看起来是等高了，但其实是被“带歪”的，不是Flex主动对齐的结果。
更隐蔽的问题是内容溢出：比如卡片里有个img没设max-width: 100%，或者textarea没限制resize，都可能导致实际渲染高度超出Flex分配范围，触发滚动或撑破布局。
- 检查每张卡片是否有未约束的绝对定位元素、浮动元素或
position: absolute脱离文档流的内容 - 用浏览器开发者工具选中卡片，看computed面板里的
flex-basis和height是否一致；如果不一致，大概率是某个子元素设置了height或min-height - 临时加
outline: 1px solid red到卡片上，能快速暴露视觉错位
IE11对flex: 1的支持有兼容性陷阱
IE11能识别display: flex，但对flex: 1的解析不完整——它会把flex: 1当作flex: 1 0 auto而非标准的flex: 1 1 0，导致子项无法收缩，小屏下容易换行错乱或溢出。
如果项目还需支持IE11，不能只写flex: 1，得拆成三值写法，并显式补全：
card {
-ms-flex: 1 1 0; /* IE11 */
flex: 1 1 0; /* 标准 */
}
- 别依赖autoprefixer自动补全IE前缀，它对
flex简写的支持不稳定 - 测试时务必在真实IE11环境（不是Edge的IE模式）中验证，特别是卡片数量动态增减的场景
- 若卡片内容含CSS Grid或
aspect-ratio，IE11完全不支持，得降级为padding-top技巧，这会进一步干扰Flex等高逻辑
Flexbox实现等高卡片看似简单，真正卡住人的往往不是语法，而是某个子元素悄悄加了一行min-height，或在调试时忘了关掉浏览器的响应式设计模式导致宽度变化，进而影响flex-wrap行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
