justify-content: space-between 在 flex-direction: column 下失效，因需父容器有明确高度（如 min-height）；卡片内底部对齐应使用 margin-top: auto 或 grid-template-rows: auto 1fr auto；IE11 中推荐降级为 margin-top: auto。
flex-direction: column 配合 justify-content: space-between 为什么卡片高度不一致时失效
因为 justify-content: space-between 只在容器有明确高度（或受父容器约束）时才起作用。如果卡片本身高度由内容撑开、且父容器没设 height 或 min-height，那所有子项会“挤”在顶部，space-between 实际无处可分。
- 必须给父容器加
height或min-height（比如min-height: 100vh或固定值） - 子卡片不能设
height: 100%除非父容器高度确定——否则 100% 计算结果是 0 - 若用
vh单位，注意移动端地址栏缩放可能导致视觉偏差
卡片内文字溢出导致底部按钮错位，怎么保底对齐
垂直分布的卡片里，标题/描述行数不确定，容易把底部按钮“顶下去”。这不是 space-between 的问题，而是内容流式布局天然行为。
- 给卡片内部再套一层
flex容器：外层flex-direction: column+justify-content: space-between，内层用margin-top: auto推按钮到底部 - 更稳妥的做法是：给描述区域加
flex: 1，让它自动撑满剩余空间，按钮自然被“挤”到最下 - 避免对文字区域设
height或overflow: hidden——这会破坏可读性，也干扰 flex 计算
IE11 下 space-between 在 column 方向完全不生效
IE11 对 flex-direction: column + justify-content: space-between 支持极差，即使加了 -ms- 前缀也常失效。
- 优先降级为
margin-top: auto：把底部元素设为margin-top: auto，它会在 column 方向下自动吸底（IE11 支持这个） - 不要依赖
justify-content在 IE 中做垂直分布，尤其当卡片数量动态变化时 - 若必须兼容，可用 JS 补充计算高度并手动设置
margin，但仅限小范围、低频卡片
用 grid 替代 flex 实现同样效果是否更稳
是的，display: grid 在垂直分布上更可控，尤其对“头部-主体-尾部”结构。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
display: grid; grid-template-rows: auto 1fr auto;—— 第一行自适应，中间用1fr吸满，最后一行自适应 - 比 flex 更少依赖容器高度，也不吃 IE11 兼容性亏（现代项目基本已不用管 IE）
- 但注意：grid 的
1fr是按网格轨道分配，若卡片内有min-height或flex: 1，可能产生嵌套冲突
justify-content，先看容器有没有“可分配的空间”。那个空间从哪来、有多大、是否稳定，比写哪条 CSS 属性更重要。 
