用justify-content: space-between可实现两个块级元素严格两端对齐，前提是父容器设display: flex，且子元素不占满整行；该方式最直接可控，适用于导航栏、页脚等场景。
用 justify-content: space-between 实现两个块级元素两端对齐
这是最直接、最可控的方式，适用于导航栏、页脚信息、按钮组等“左一个、右一个”的典型场景。
关键前提是父容器必须设为 display: flex，否则 justify-content 完全不生效。子元素不能设 flex: 1 或 width: 100%，否则它们会撑满整行，space-between 就没空间可“分”了。
- 子元素之间不依赖内容宽度，自动分配剩余空白区域
- 只有两个子元素时，它们会紧贴容器左右边缘，视觉上就是严格两端对齐
- IE10/11 需加前缀：
justify-content: -ms-flex-pack: justify - 移动端 Safari 对 fixed + flex 的
justify-content解析不稳定，务必给父容器显式设width: 100%
text-align-last: justify 用于单行文字两端对齐
这不是排两个盒子，而是让一行文本的首字和末字分别贴住左右边界，常见于表单 label、卡片标题、窄列信息行。
只写 text-align: justify 没用——浏览器对单行文本默认忽略 justify 行为，必须配合 text-align-last: justify 才生效。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 中文段落需额外注意：移动端 Safari 默认不按字间距拉伸，得靠
text-justify: inter-character（仅 Chrome 120+/Safari 17.4+ 支持） - 文字过短（如“姓名”“电话”）时，浏览器可能无法合理分配字间距，效果不可控
- iOS 14.5 之前不支持
text-align-last，会回退为左对齐，别指望它在旧版 Safari 生效 - 中英文混排时，空格和标点会影响断行点，建议加
word-break: keep-all防止意外换行
为什么 float 或 margin-left: auto 不推荐
这两种方式看似能“推”出两端效果，但实际埋了不少坑，尤其在响应式或混合布局中容易失控。
float 方案需要手动计算宽度和 margin，比如每项 144px、间隔 20px，就得套一层 820px 宽的 inner 容器并设 overflow: hidden 来藏掉多余间距——这种硬编码完全没法适配不同屏幕。
-
margin-left: auto和justify-content混用，在 iOS 15.3 及更早版本会被 Safari 忽略，导致右边元素失效 - 浮动元素脱离文档流，父容器高度塌陷问题必须额外处理（如
overflow: hidden或伪元素 clearfix） - 当子元素含图标+文字时，
white-space: nowrap若未关闭，换行判断异常会让justify-content当成单行处理
Grid 中实现两端对齐要注意轨道定义
Grid 也能做，但不像 Flexbox 那样直白。如果只写 justify-content: space-between 却没定义明确的列轨道，效果往往不如预期。
比如用 grid-template-columns: 1fr auto 1fr 强制中间项“吸住”，左右留空，这其实不是真正的两端对齐，而是靠比例占位模拟出来的——一旦中间内容变宽，左右空间就被压缩。
- 真正两端对齐应优先用
grid-template-columns: max-content 1fr max-content，再配合justify-items: start/end - Grid 的
place-content对单行两列效果有限，不如 Flexbox 的justify-content稳定 - 旧版 Android WebView 对 Grid 的
justify-content支持极差，部分机型直接忽略
width: 100% 会导致 space-between 在 Safari 上完全失效**；还有就是中文单行文本想靠 text-align-last 对齐，却忘了它在 iOS 16.6 之前根本不支持 inter-character，结果调试半天发现只是浏览器不认。 
