space-between并非真正均匀分布，而是首尾贴边、中间间隙均分；真正均匀应选space-evenly，它使首前、项间、末后所有间隙完全相等。
justify-content: space-between 是最直接有效的方案，但必须配合 display: flex 容器使用，且子项不能设固定宽或 flex: none，否则会失效。
为什么 justify-content: space-between 不生效？
常见错误是只写了 justify-content 却漏掉关键前提：
- 父容器没加
display: flex—— 没有弹性上下文，所有 justify-* 属性都无效 - 子项用了
float或position: absolute—— 这些元素已脱离文档流，不参与 flex 排列 - 子项设置了
width或flex: 0 0 auto（比如带white-space: nowrap的长文本），挤占了可分配空间 - 只有 1 个子项时，
space-between和flex-start表现一致，容易误判为“没起作用”
justify-content: space-around 和 space-evenly 的区别
三者都用于主轴分布，但间隙逻辑不同：
-
space-between：首尾贴边，中间空隙均分（2 项 → 1 段空隙；3 项 → 2 段空隙） -
space-around：每项两侧空隙相等，因此首项前、末项后空隙 = 中间空隙的一半 -
space-evenly：所有相邻项之间（含首前、末后）空隙完全相等 —— 这才是真正的“均匀分散”
例如 3 个链接：space-evenly 会产生 4 段等宽空隙；space-between 只有 2 段中间空隙，首尾无额外空隙。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
移动端适配时的隐藏陷阱
在小屏幕下，space-between 或 space-evenly 可能导致文字换行或溢出，尤其当导航项文字长度差异大时：
- 避免对
a标签设white-space: nowrap，否则文字撑开容器，破坏间距逻辑 - 用
flex-wrap: wrap+ 媒体查询降级为垂直堆叠，比强行压缩更可靠 - iOS Safari 对
space-evenly支持较晚（iOS 14.5+），旧版本会回退为flex-start，需测试或用space-around替代
真正要让项目“均匀分散”，得先确认你指的是视觉均匀（space-evenly），还是首尾锚定+中间均分（space-between）——后者更常用，但名字容易让人误解为“完全均匀”。
