justify-content: space-evenly 实现子元素与容器边缘及彼此间距完全相等，但需满足父容器为 flex 布局、子项未占满主轴空间、方向匹配且为块级元素；多行时各行独立计算，IE 全系不支持。
justify-content: space-evenly 能实现子元素与容器边缘、子元素彼此之间的间距完全相等，但前提是它真能生效——而现实中，它常因几个隐蔽条件失败。
为什么space-evenly写了却没反应
最常见原因不是语法错，而是布局前提被破坏：
- 父容器没设
display: flex（或inline-flex），只写了justify-content没用 - 子元素用了
flex-basis、width或flex: 0 0 auto等固定尺寸声明，把主轴剩余空间吃光了，space-evenly就没“空”可分 - 误设了
flex-direction: column，此时justify-content控制的是垂直方向，但你却在看水平效果 - 子元素是
、这类 inline 元素，默认不参与 flex 布局，得先加display: block或display: flex
space-evenly 和 space-between、space-around 的数学区别
三者都靠“剩余空间”分配，但分法不同。假设容器主轴剩余宽度为 60px，子项数量为 3：
-
space-between：只在 2 个间隙中分 → 每段30px，首尾贴边（无外边距） -
space-around：每项“左右各留一份”，共 4 份 → 首尾外边距各15px，中间两间隙各30px -
space-evenly：共 4 段等距（左外边距 + 2 个中间 + 右外边距）→ 每段严格15px
所以别指望 space-around 能替代 space-evenly —— 视觉上首尾太“紧”，尤其在浅色背景或带边框的卡片中一眼可辨。
多行 Flex 下 space-evenly 的错位陷阱
当子项换行（flex-wrap: wrap）时，space-evenly 不会跨行统一分配，而是对**每一行单独计算**：
- 第一行有 3 项 → 左/右/中间各
15px - 第二行只有 2 项 → 左/右/中间各
20px（剩余空间变大） - 结果：第二行首尾离容器边更远，看起来“漂移”了
这种错位在响应式断点变化时尤其明显。真要多行均分，优先用 justify-content: center + 子项统一 margin-inline: 16px，或直接切到 display: grid 配合 gap。
IE 和旧版浏览器的兼容性现实
space-evenly 在 IE 全系（包括 Edge Legacy）完全不支持，且无法用 -ms- 前缀补救。Chrome 104+、Firefox 103+、Safari 16.4+ 才稳定支持。
- 若需兼容 IE11，老老实实用伪元素占位：
::before和::after设flex: 0 0 0，再配justify-content: space-between - 若只兼容现代浏览器但需支持 Safari 16.3 及更早，
gap在 Flex 中也不行，只能退回margin手动算（如margin-inline: calc((100% - 3 * 80px) / 4)）
真正麻烦的从来不是写法本身，而是你得同时盯住容器尺寸、子项是否换行、目标浏览器版本、以及设计稿里那 1px 的视觉对齐要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
