justify-content: space-between 是实现两个子元素水平两端对齐最直接的方式，需父容器设 display: flex 且子元素不抢占空间（如避免 flex: 1 或左右 margin），适用于导航栏等固定结构。
用 justify-content: space-between 实现两个子元素两端对齐
这是最直接、最可控的方式，适合导航栏、页眉、工具栏这类“左 Logo + 右菜单”的固定结构。
关键不是加属性，而是控制父容器和子元素的渲染行为：
- 父容器必须设
display: flex，且不能是inline-flex（否则可能受行内上下文干扰） - 两个子元素都不要设
flex: 1、width: 100%或flex-grow: 1，否则它们会抢空间，撑满整行，space-between就失效了 - 避免给子元素加
margin（尤其是左右 margin），它会干扰 flex 的间距分配逻辑 - IE10/11 需补
-ms-flex-pack: justify，现代浏览器无需前缀
示例结构干净有效：
<header class="nav-header">
<div class="logo">MyApp</div>
<nav class="menu"><a href="#">Home</a> <a href="#">About</a></nav>
</header>
<style>
.nav-header {
display: flex;
justify-content: space-between;
}
</style>
用 text-align: justify + text-align-last: justify 对齐单行文字
这不是排两个块，而是让一行汉字/英文首尾贴住容器左右边界，常用于表单 label、卡片信息行、窄栏标题等场景。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
纯 text-align: justify 在单行下无效——浏览器默认忽略，必须配 text-align-last: justify 才生效。
- 中文短文本（如“姓名”“电话”）容易拉伸过度，字距突兀；建议内容长度 ≥ 4 字，效果更自然
- 必须设
lang="zh"（写在元素或祖先上），否则 Safari 和部分 Chrome 版本会跳过text-justify相关行为 - 移动端 iOS Safari 直到 14.5+ 才支持
text-align-last，旧版会回退为左对齐，别指望兼容 - 混排中空格、标点会被拉伸，加
word-break: keep-all可防止意外断词，但不能阻止标点间距扩大
基础写法：
<div class="field-label" lang="zh">用户邮箱地址</div>
<style>
.field-label {
text-align: justify;
text-align-last: justify;
word-break: keep-all;
}</style>
为什么不用 text-justify: inter-character？
这个值看起来很对口，但它不是“开关”，而是一个依赖条件的增强项：只在 text-align: justify 生效的前提下起作用，且现代浏览器支持度仍不统一。
- Firefox 110+、Chrome 120+、Safari 17.4+ 才稳定识别；iOS Safari 16.x 及更早版本完全无视
- 即使支持，标点（如句号、顿号、括号）也会被强制插入间距，小字号下视觉断裂明显
- 它不解决“最后一行怎么对齐”的问题——还得靠
text-align-last，单独写没意义 - 网上常见的
text-justify: distribute-all-lines是 IE 私有废弃值，所有现代浏览器都不认，写了等于白写
Grid 布局里 justify-content: space-between 为啥不生效？
Grid 容器默认主轴是行方向（grid-template-rows），justify-content 控制的是**轨道之间的空隙**，不是子元素位置。如果子元素没占满整行，它不会把它们推到两端。
- 想让两个子项两端对齐，得用
justify-items: start+justify-self: end分别控制，或更干脆：改用grid-template-columns: 1fr auto 1fr，把中间留空 - 或者直接放弃 grid，切回 flex —— 对两端对齐这种简单需求，flex 更直觉、容错率更高
- 注意：Grid 中若定义了
grid-auto-flow: column，主轴就变成列方向，此时justify-content才管水平分布，但多数人不会这么设
真正难的不是写出哪几行 CSS，而是判断该不该用两端对齐：短段落、带图标行、小屏窄容器、含内联按钮的文本行……这些场景下硬上 justify，只会让文字失去呼吸感，可读性下降。这时候宁可用 JS 插入零宽空格微调，或服务端预处理，也别信“一行 CSS 解决一切”。
