text-align: justify 仅对含空白分隔的内联内容生效，需容器设宽、列间有空格或换行；flex + justify-content: space-between 更可靠，但要求子元素为块级且不脱离 flex 流。
text-align: justify 需要“可见分隔符”才能生效
直接写 text-align: justify 对多列 div 或 span 不起作用，因为浏览器只对**内联内容（如文字、inline元素）** 应用该规则，且要求行内有至少两个“可分隔单元”——也就是必须存在空格、换行或制表符等空白字符作为分隔。如果列是连续写的：<div>A</div><div>B</div><div>C</div>，它们之间没有空白，justify 就完全忽略。
常见错误现象：列挤在一起左对齐，或者最后一行明显右端留白。
- 在 HTML 中手动插入空格或换行（但要注意空格会被压缩，需配合
white-space: pre或font-family: monospace才能保留） - 更稳妥的做法是把每列包装进
span或label，并在标签间加换行 + 缩进（即源码里写成多行），这样解析后 DOM 会自带文本节点作为分隔 - 必须设置容器宽度（不能是
fit-content或未设宽），否则 justify 无参照基准
flex + justify-content: space-between 更可靠但需结构改造
这是目前最主流、兼容性好（IE11+）、行为可预测的方案，但它不作用于纯文本流，而是对**子元素**进行间距分配。所以你要确保列是块级容器（如 div），且父容器设为 display: flex。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 子元素不能设
float或display: inline-block，否则会脱离 flex 流，justify-content失效 - 若列数动态变化（比如从 3 列变 2 列），
space-between会在首尾留出等量空白，但中间间隙会变大——这不是 bug，是设计行为 - 想让最后一行也两端对齐（比如响应式下折行），需额外用
flex-wrap: wrap+justify-content: space-between，但此时末行默认左对齐；要末行也撑满，得用伪元素 hack 或 JS 补空项
inline-block + text-align: justify 的组合陷阱
这个老方案看似兼顾了语义和兼容性，实际极易出错。它依赖父容器 text-align: justify 拉开子元素间距，而子元素必须是 display: inline-block 并设固定宽（或 width: calc(100% / N)）。
关键限制：
- 所有列必须显式设
width，否则浏览器按内容宽度计算，justify 无法均匀分配剩余空间 - 列之间 HTML 源码必须有空白（换行/空格），否则 inline-block 元素紧贴，justify 无分隔点可操作
- 末行对齐失效：当列数不能整除容器宽时，最后一行只剩几个列，justify 不会拉伸它们——得靠
::after插入 100% 宽的隐藏元素“占位” -
vertical-align: top必须加，否则基线对齐会导致高度不一致的列上下错位
box-sizing 和 margin/padding 的隐性干扰
无论用哪种方案，只要列宽用百分比或固定值，padding 和 border 都会撑出额外宽度，导致换行或溢出。例如三列各设 width: 33.33%，再加 padding: 10px，总宽就远超 100%。
解决办法只有一个：
- 全局重置盒模型：
* { box-sizing: border-box }，让 padding/border 包含在 width 内 - 避免在列上直接设
margin（尤其是左右 margin），改用父容器padding+ 子元素margin: 0控制整体边距 - 如果必须用 margin 分隔列，优先用
gap（flex/grid）替代，它不参与尺寸计算，且 IE 不支持，需 fallback
真正难的不是写出两端对齐，而是让不同屏幕宽度下都稳定不换行、不留缝、不抖动——这取决于你是否提前约束了所有影响尺寸的变量，包括字体渲染差异、小数像素舍入、以及移动端 zoom 行为。别指望一个 CSS 规则包打天下。
