justify-content可用值包括flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（首尾贴边、中间均分）、space-around（各元素两侧等距，首尾间距为中间一半）、space-evenly（所有间距完全相等，ie不支持）。
justify-content有哪些可用值及其实际效果
justify-content 控制的是 flex 容器内子元素在主轴（默认是水平方向）上的对齐与分布方式。它不改变子元素自身尺寸，只调整它们之间的空白和位置关系。
常见取值及行为：
-
flex-start：所有子元素靠左对齐（默认值） -
flex-end：全部靠右对齐 -
center：整体居中，左右留白相等 -
space-between：首尾贴边，中间间隙均分（注意：只有 ≥2 个子元素时才看出“均分”效果） -
space-around：每个子元素两侧留出相等间距（视觉上中间间隙比首尾大一倍） -
space-evenly：所有相邻项之间、以及首尾与容器边缘的间距完全相等（IE 不支持）
为什么设置了 justify-content 却没生效
最常被忽略的前提是：父容器必须是 flex 容器，且子元素是直接子节点。如果漏了 display: flex，或者用了 inline-flex 但父级有其他布局干扰（比如 float 或 position: absolute），justify-content 就不会起作用。
典型误操作：
- 只给子元素设
display: flex，忘了给父容器设 - 父容器用了
display: inline-flex，但宽度不够容纳所有子元素，导致换行后主轴变成垂直方向（此时justify-content控制的是垂直对齐） - 子元素设置了
flex: 0 0 auto以外的 flex 属性，意外拉伸或压缩，掩盖了分布效果 - 容器有
text-align: center等 CSS 干扰，误以为是 justify-content 在起作用
space-between 和 space-around 的视觉差异怎么判断
关键看“首尾子元素到容器边缘”的距离是否等于“子元素之间的间距”：
-
space-between：首尾紧贴容器边界，中间空隙 = (容器宽 − 所有子元素总宽) ÷ (子元素数 − 1) -
space-around：每个子元素左右各有一份“半间距”，所以首尾到边界的距离 = 子元素间间距的一半；中间两个子元素之间 = 左右两个“半间距”之和 → 视觉上是首尾距离的两倍 -
space-evenly：首尾距离 = 子元素间距离 = (容器宽 − 所有子元素总宽) ÷ (子元素数 + 1)
用一个三子元素例子验证：
.container { display: flex; width: 300px; }
.item { width: 60px; }
<p>/<em> space-between → 两边 0，中间两空隙各 90px </em>/
/<em> space-around → 两边各 45px，中间两空隙各 90px </em>/
/<em> space-evenly → 两边各 45px，中间两空隙也各 45px </em>/</p>
兼容性与 fallback 方案怎么写
space-evenly 在 IE 中完全无效，Safari 10.1+ 才开始支持；space-around 和 space-between 兼容性好得多（IE10+、主流浏览器全支持）。
若需兼容老版本 Safari 或 IE：
- 避免单独依赖
space-evenly，改用space-around+ 额外 margin 调整首尾 - 用
@supports做特性检测：@supports (justify-content: space-evenly) { .container { justify-content: space-evenly; } } @supports not (justify-content: space-evenly) { .container { justify-content: space-around; } } - 慎用
text-align: justify+inline-block模拟，因为需要额外设置::after伪元素撑开最后一行，维护成本高
真正容易被忽略的是：当子元素存在 margin 或 border 时，justify-content 计算的是内容盒（content box）之间的间距，不是外边距边缘。如果需要精确控制视觉间隔，得把 margin 统一归入子元素内部处理，而不是依赖 justify-content “挤”出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
