justify-content 只在 flex 或 grid 容器上有效，用于控制其直接子元素的主轴对齐；必须设父容器 display: flex，且值作用于主轴方向（row 为水平，column 为垂直），常见错误是误加在子元素或父容器未启用 flex。
justify-content 在 flex 容器上才有效
直接给子元素加 justify-content 没用，它只作用于 flex 或 grid 容器本身，用来控制其**直接子元素**的主轴对齐方式。常见错误是写在子元素上，或者父容器没设 display: flex，结果样式完全不生效。
- 必须先让父容器变成 flex：
display: flex -
justify-content要写在父容器上，不是子元素 - 主轴方向默认是水平（
flex-direction: row），这时justify-content才管水平对齐 - 如果父容器是
flex-direction: column，那justify-content控制的是垂直对齐，别混淆
justify-content: center 和 space-between 的行为差异
这两个值都常被用来“居中”或“铺满”，但逻辑完全不同，选错会导致布局意外偏移或留白失控。
-
justify-content: center：所有子元素整体居中，彼此间距不变，适合单个或少量元素居中 -
justify-content: space-between：首尾子元素贴住容器两端，中间等距分布；**子元素少于 2 个时，效果退化为左对齐（无间隔可分）** -
justify-content: space-around：每个子元素两侧有相等间隙，视觉上更宽松 -
justify-content: space-evenly：所有间隙（包括首尾外边距）完全相等，兼容性稍差（IE 不支持）
示例：.container { display: flex; justify-content: space-between; } —— 如果只有 1 个子元素，它会紧贴左侧，不是居中。
子元素宽度不确定时，justify-content 可能失效
当子元素是 inline 元素（比如未设宽的 <span>）、或内容撑开且未限制宽度时，justify-content 看起来“没反应”，其实是子元素把整行占满了，没剩余空间可分配。
立即学习“前端免费学习笔记（深入）”；
- 检查子元素是否意外设置了
width: 100%或flex: 1，导致它独占主轴 - inline 元素在 flex 中默认不换行也不收缩，可用
flex-shrink: 0或显式设宽辅助调试 - 想让文字内容居中，优先考虑
text-align: center；justify-content是为块级子元素排布设计的
移动端或旧版 Safari 中 justify-content 兼容性注意点
大部分现代浏览器支持良好，但 iOS 9.3 及更早的 Safari 对 space-evenly 完全不识别，会回退到 flex-start（左对齐），造成严重偏移。
- 如需兼容 iOS 9–10，避免用
space-evenly，改用space-around+ 调整 padding 模拟 - 某些安卓 WebView（如 UC 内核）对
justify-content的解析有细微偏差，建议用真实设备验证 - 不要依赖
justify-content实现关键布局容错，必要时配合margin: auto或绝对定位兜底
真正容易被忽略的是：flex 容器的 min-width 或 width 是否被父级压缩，导致主轴长度不足——这时再怎么调 justify-content 都没意义。
