CSS两端对齐全解析：text-align与justify-content的差异与实践

刚接手一个老项目的时候，前端组最常出现的一个“玄学问题”就是：为什么我给文本写了 text-align: justify，段落却还是左对齐？又或者，为什么我用 justify-content: space-between 做导航栏，明明写了“两端对齐”，最后一行却死活撑不满？

这两个问题几乎是每个前端人都会遇到的。再往深一点说，“两端对齐”在 CSS 里其实是一个家族概念：文本级有 text-align，盒模型布局级有 justify-content / justify-items，甚至还有 text-align-last 这种容易被忽略的细节。很多新手把 text-align 和 justify-content 混为一谈，导致代码写了不少，效果却总差一口气。

这篇文章我打算梳理一条完整的路线：先把“两端对齐”这个词在 CSS 里的几层含义拆开，再逐个击破文本对齐、Flex/Grid 容器对齐、多行文本对齐这些实际场景，最后附上我在实际项目里踩过的一些坑和最终建议。不管你是刚学 CSS 的小白，还是已经写了几年样式但总被“差一点点”折磨的工程师，这篇都应该能给你一些可落地的参考。

1. 先搞清楚：CSS 里的“两端对齐”到底指哪一类对齐

很多人第一次听到“两端对齐”，脑子里第一反应是 Word 里的“两端对齐”按钮，就是让段落左右两边都贴齐边界的那个效果。到了网页里，直觉对应物就是 text-align: justify。但实际上，项目里大家常说的“两端对齐”，有相当大比例指的是“一排元素左右两端顶满”，也就是 Flex 容器里 space-between 做的事。

这两种场景看起来是一回事，底层机制完全不同，如果一开始没有分清，后面排查问题会特别痛苦。

1.1 文本的对齐：text-align 系列

text-align 控制的是行内内容在块级容器内的水平分布方式。取值主要就几个：left、right、center、justify。

css复制.paragraph {
  text-align: justify;
}

这个属性只对“有换行可能的文本”有明显效果。如果是一行短标题，justify 基本等于 left，因为一行内根本没有足够的空隙去拉开。

html复制<p class="paragraph">这是一段需要两端对齐的中文文本。</p>

注意，text-align 影响的是普通文本、inline 元素、inline-block 元素，不直接影响 flex item 或 grid item。

1.2 布局的对齐：Flex 与 Grid 的 justify 系列

在 Flex 布局里，主轴方向的对齐方式是 justify-content，交叉轴方向是 align-items。这里最容易和文本对齐产生混淆的就是 justify-content: space-between，因为中文社区习惯把这种效果叫“两端对齐”。

css复制.nav {
  display: flex;
  justify-content: space-between;
}

在 Grid 布局里，还有 justify-items、justify-content 两套属性。justify-items 控制单元格内部项目的水平位置，justify-content 控制整个网格在容器里的水平分布。

css复制.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

所以遇到“CSS 设置两端对齐”这个标题，第一步永远不是抄代码，而是先问：你要对齐的是一段文字，还是一组盒子？这个问题的答案，决定了你该用哪个属性。

1.3 垂直方向的对齐：另一个常见的混淆点

水平两端对齐之外，还有一类需求是“垂直方向两端对齐”。Flex 里通过 align-content 和 align-items 处理，Grid 里有 align-content 和 align-items。

最常见的现象是：想让容器里的多行文本上下贴边，结果写成了 justify-content: space-between，然后发现水平方向没有动静，垂直方向也没变。

原因很简单，justify-content 只在主轴方向生效，如果 flex-direction: column，主轴变成了垂直方向，justify-content: space-between 才会让元素在垂直方向两端对齐。

css复制.column-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 此时才是垂直两端对齐 */
}

我在答疑时见过无数人栽在这里。记住一条：先确认主轴方向，再确认你对齐的维度，最后选属性。

2. 文本两端对齐：text-align: justify 的常规用法和隐藏问题

如果目标真的是一段文字左右两端都顶满，text-align: justify 是最直接的答案。它模拟的正是传统印刷排版里的“分散对齐/两端对齐”：通过调整单词或字符之间的间距，让每一行的左右两端都贴紧容器边界。

2.1 基础写法和为什么默认不开启

标准 CSS 写法只有一行：

css复制p {
  text-align: justify;
}

但你会发现一个问题：浏览器默认并没有启用 justify。因为