先记住这个答案
一个很宽的工具栏如果强行居中，左侧按钮可能被挤到视口外而且不容易滚回去。justify-content: safe center 在空间足够时仍居中；当这种对齐会造成起始侧不可达的溢出时，会回退到起始侧对齐。它改的是对齐位置，不会替你压缩按钮、换行或创建滚动区域。
safe center正常空间仍居中- 居中导致起始侧溢出时回退
safe不会缩小项目- 起始侧随主轴方向变化
过宽工具栏保持起始侧可达
一个横向弹性容器放了比视口更宽的工具区，直接 justify-content: center 可能让工具区左右两边都伸出容器，左侧内容甚至滚不到。改成 safe center，当对齐对象放不下时向起始侧靠拢，剩余部分可以沿正常溢出方向滚动。若真正要让工具按钮完整可见，还需要滚动、换行或响应式收纳。
.toolbar {
display: flex;
justify-content: safe center; /* 居中会溢出时靠主轴起始侧 */
overflow-x: auto;
}
.toolbar > * { flex: none; }工具区过宽时，对齐回到主轴起始侧；横向滚动仍由 overflow-x: auto 提供。
溢出时才触发安全对齐
普通的居中在剩余空间为负时，可能在两端各产生一部分溢出。safe 要求对齐行为避免把内容推到不可访问的溢出一侧；如果没有这类风险，仍按居中显示。相对的 unsafe 允许保持指定对齐，即使有内容溢出。实际结果还取决于主轴方向、书写方向和滚动容器，不能把“起始侧”固定理解为屏幕左边。
可以用一个可横向滚动、宽度 240px 的工具栏试验：放进一组总宽 400px 的按钮，比较 center 与 safe center。前者可能把按钮组两端都挤出去；后者尝试保住起始侧，让用户能从滚动起点找到第一项。再把容器加宽到 500px，两者都应居中。这个对比能看出 safe 是溢出时的对齐回退，不是另一种始终靠左的 justify-content 值。
若产品希望“内容再宽也不能横向滚动”，safe center 并不能完成目标；它只避免对齐方式把起始侧内容藏在不可达的位置。仍需在更早的布局阶段决定是否让按钮缩小、换行或折叠为菜单。把对齐策略和容量策略分开，才能解释它为何只在溢出时变化。
容易答错的地方
- 把
safe理解成自动换行 - 它不改变
flex-wrap，也不改变项目尺寸。整组项目太宽时，仍然会溢出。 - 以为回退总是靠左
- 主轴起始侧由
flex-direction和书写方向决定；在反向布局或 RTL 下，可能是右侧或其他方向。
面试官还会怎么问？
内容能放下时，safe center 与 center 有区别吗？
没有触发溢出保护时，两者都按居中对齐。
safe 可以和 align-items 一起用吗？
可以。它是 Box Alignment 的溢出对齐关键字，也能用于支持该语法的其他对齐属性，作用轴由属性决定。
为什么加了 safe 仍看到滚动条？
它只改变对齐位置，不压缩内容。项目总宽度大于容器，滚动仍是正常结果。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。