用 justify-content: space-between 是最简单可靠的方式，但需容器为 flex 且子元素 ≥ 2 个；它将主轴剩余空间均分至相邻元素间，实现首尾贴边、中间等距；space-evenly 会导致首尾留白，不满足两端对齐需求。
直接结论：用 justify-content: space-between 是最简单、最可靠的方式，但必须满足两个前提——容器是 display: flex，且子元素 ≥ 2 个。
为什么 justify-content: space-between 能做到“两端贴边 + 中间均分”
它把容器主轴（默认水平）剩余空间平均切分成「子元素数量 − 1」份，全部塞进相邻元素之间；首尾元素自动紧贴容器左右边缘。视觉上就是左顶左、右顶右、中间空隙等宽。
- 不依赖子元素宽度（哪怕有的宽、有的窄，间距仍指 margin 区域）
- 兼容性好（IE10+），无需前缀（
-webkit-等已基本淘汰） - 不会因内容换行或文本长度变化而失效——它只管块级子项的位置，不管内部文字怎么排
justify-content: space-evenly 看似更“均匀”，但实际破坏“两端对齐”
它的逻辑是：首元素前、元素之间、末元素后，所有间隙都相等。这意味着首尾必然离容器边缘留白，**根本不是“两端对齐”**。
- 错误现象：
space-evenly下左右各多出一段空白，像被“居中悬浮” - 强行补救（如加负
margin或伪元素）会引入额外复杂度和兼容风险 - 如果你要的是“首尾贴边”，就别碰
space-evenly—— 它的设计目标就是“呼吸感”，不是“对齐”
当子元素只有 1 个或动态增删时，space-between 会失效
单个子元素时，space-between 退化为 flex-start（左对齐），无法撑开；数量变动时，间距比例也会变，可能不符合预期。
立即学习“前端免费学习笔记（深入）”；
- 解决办法一：固定数量 → 直接用
space-between，最稳 - 解决办法二：动态数量 + 要求首尾贴边 → 改用
grid：grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))配合justify-content: stretch，更可控 - 解决办法三：需要精确控制首尾到边距离（比如都留 16px）→ 放弃
space-between，改用gap+padding组合（父容器设padding-inline: 16px，再设gap: 0 16px）
别用 text-align: justify 混淆概念
它只作用于**内联文本内容**（如 <p> 里的文字），靠拉伸单词/空格实现两端对齐，对块级子元素完全无效。
- 中文场景下易出现字距过大、阅读困难，需配合
text-justify: inter-ideograph（仅部分浏览器支持） - 最后一行永远不强制对齐，且无法控制首尾元素与容器边界的距离
- 如果你在调试一个 div 里放了三个按钮却想用
text-align: justify让它们两端对齐——这条路走不通
真正容易被忽略的点是：很多人以为“两端对齐”是个单一效果，其实它背后藏着两种完全不同的需求——一种是“首尾贴边”，一种是“视觉均匀”。选错方案，后续所有调整都是徒劳。动手前先确认：你到底要贴边，还是要留白？
