text-align: justify 不能实现中间字等距且两端顶边，因其仅对可折行内联内容生效，换行时拉伸空格，不控制单行间距或首尾贴边；flex 的 space-between 或 grid 的 1fr 等分才是正确方案。
text-align: justify 为什么不能让中间字等距、两端顶到边？
因为 text-align: justify 只对「可折行的内联内容」生效，且只在换行时拉伸单词/字母间的空格，不控制单行内元素间距；它也不处理首尾是否贴边——首字左对齐、末字右对齐是默认行为，但“中间等距”根本不是它的设计目标。
用 flex 实现两端对齐 + 中间元素等距（无间隙）
这是最常用也最可控的方式：把容器设为 display: flex，再用 justify-content: space-between。它会让首尾子元素紧贴容器边缘，其余元素均匀分布。
- 适用场景：导航栏、按钮组、图标排布等固定数量的块级/内联元素
- 注意：必须有 ≥2 个子元素，否则
space-between退化为左对齐 - 如果子元素宽度不一致，视觉上“等距”仍成立（间距指 margin 区域），但可能显得不均衡
- 兼容性好（IE10+），无需额外 hack
.container {
display: flex;
justify-content: space-between;
}
用 grid 实现更灵活的等距 + 边界贴合
当需要「n 个元素严格等分容器宽度，且首尾紧贴两边」，grid 比 flex 更直接：用 grid-template-columns: repeat(auto-fit, minmax(...))) 配合 justify-content: stretch，或更简单的——显式定义列数 + 1fr 等分。
- 示例（4 个等宽项，填满容器）：
grid-template-columns: repeat(4, 1fr) - 首尾自动贴边，中间自然等距，不依赖子元素内容或顺序
- 比
flex + space-between更适合响应式布局，尤其配合auto-fit和minmax() - 注意：若子元素设置了
width或flex-basis，可能覆盖1fr行为
justify-content: space-evenly 的坑在哪？
它看起来更“公平”——首尾元素到容器边缘的距离 = 元素之间的间距。但正因如此，它**不会让首尾贴边**，和题目要求的“两端对齐”冲突。
立即学习“前端免费学习笔记（深入）”；
- 错误现象：用
space-evenly后发现左右留白，不像预期那样“顶到边” - 原因：它是按“所有间距相等”计算的，包括首元素前、末元素后那段空白
- 想强行贴边？只能加负 margin 或用伪元素 hack，得不偿失
- 结论：要“两端对齐”，就别碰
space-evenly；要“视觉均匀”，再考虑它
flex + space-between，后者优先试 grid + repeat(…, 1fr)。别被“两端对齐”四个字带偏去调 text-align——那条路走不通。 
