justify-content: space-between 未生效的常见原因包括父容器未设 display: flex、子元素过少（需≥2个）、子元素被设为 flex: 0 0 100% 或 margin: auto 抢占控制权，以及 column 方向下父容器缺少明确高度；其与 space-around、space-evenly 的核心区别在于首尾子元素是否留白；IE11 不支持 space-evenly，且对 flex: 1 和 flex-wrap: wrap 兼容性差。
justify-content: space-between 为什么没生效
常见原因是父容器没设 display: flex，或者子元素被设了 flex: 0 0 100% 这类强制占满的属性，导致只剩一个“可见”子项——space-between 至少需要两个及以上子元素才起作用。
另外注意：如果子元素用了 margin: auto，它会抢占对齐控制权，覆盖 justify-content 的行为。
space-between 在 flex-direction: column 时的表现
垂直方向同样有效，但必须确保父容器有明确高度（比如 height: 400px 或 min-height），否则子元素高度撑开父容器，没有剩余空间可“分配”。
此时 justify-content: space-between 会让第一个子元素贴顶、最后一个贴底，中间留空均分。
立即学习“前端免费学习笔记（深入）”；
示例：
.container {
display: flex;
flex-direction: column;
height: 300px; /* 必须设定 */
justify-content: space-between;
}和 space-around / space-evenly 的关键区别
space-between：首尾子元素紧贴容器边缘，间隙只在中间子元素之间均分；
space-around：每个子元素两侧都有一半间距，视觉上首尾离边距是中间间隙的一半；
space-evenly：所有相邻元素（含首尾与容器边）的间距完全相等。
实际选哪个，取决于设计稿里“首尾要不要留白”这个细节。很多 UI 稿写的是“两端对齐”，但设计师真正想要的其实是 space-evenly。
IE11 兼容性要注意的坑
IE11 支持 justify-content: space-between，但不支持 space-evenly；而且当子元素使用 flex: 1 时，IE11 可能错误计算剩余空间，导致间隙消失或错位。
稳妥做法：
- 避免在 IE11 场景中混用
flex: 1和space-between - 用
margin手动模拟两端对齐（例如给第一个加margin-top: 0，最后一个加margin-bottom: 0，中间统一设margin: auto） - 检查是否启用了
flex-wrap: wrap—— IE11 下它会让space-between完全失效
实际布局中，“两端对齐”听起来简单，但真正在 flex 容器里稳定实现，得同时盯住子元素数量、尺寸约束、书写模式和浏览器版本这四个变量。
