justify-content 值应按子元素数量和主轴方向选择：1个用center；2个二者均可，space-between使首尾贴边；3个及以上优先用space-evenly或space-around；需确认父容器为flex且flex-direction决定主轴方向。
justify-content 值选 center 还是 space-between？看容器里有几个子元素
只有一两个子元素时，justify-content: center 和 justify-content: space-between 看起来效果一样，但行为完全不同。前者把所有子元素当一个整体居中；后者强制首尾贴边、中间均分空白——如果只有 1 个子元素，space-between 会把它顶到主轴起点（不是居中）。
- 1 个子元素：用
center，别用space-between（它不居中） - 2 个子元素：两者都可，但
space-between会让它们分别贴左右/上下边缘 - 3 个及以上：想等距分布用
space-around或space-evenly，别硬套space-between
flex-direction 改变后，justify-content 的“水平”就失效了
justify-content 对齐的是 flex 容器的主轴，不是屏幕的“水平方向”。一旦设了 flex-direction: column，主轴变成垂直方向，justify-content: center 就是垂直居中，不是水平。
- 检查当前
flex-direction值，再决定justify-content是管横还是管竖 - 不要记“justify-content = 水平居中”，要记“justify-content = 主轴居中”
- 想不管 flex-direction 都水平居中？得配合
align-items或用margin: auto
justify-content 不生效？先确认父容器是不是 display: flex
这是最常踩的坑：justify-content 只对 display: flex 或 display: inline-flex 的直接父容器有效。写在子元素上、或父容器只是 block 或 grid，它完全被忽略。
- 打开浏览器开发者工具，选中父容器，看 computed 样式里
display是否为flex - 子元素上写的
justify-content无效，删掉 - 父容器用了
float或position: absolute，可能让 flex 失效，优先排查布局干扰
space-evenly 和 space-around 在 Safari 14.1 之前不支持
space-evenly 最均匀，space-around 首尾留白是中间的一半，但老 Safari（尤其 iOS 14.1 及更早）根本不认这两个值，会退回到 flex-start，整个布局偏左/上。
立即学习“前端免费学习笔记（深入）”；
- 需要兼容老 Safari？降级用
space-between+ 手动加空占位元素，或改用margin控制 - 用
@supports (justify-content: space-evenly)做特性检测再覆盖 - 别只靠 Can I Use 查表，真机测 iOS 14.x 的微信内置浏览器，它比 Safari 更滞后
