用 justify-content: space-between 实现两端对齐最常用可靠，需父容器 display: flex 且子元素不设 flex:1 或 100% 宽；text-align-last: justify 配合 text-align: justify 可实现单行文字两端对齐；避免用 float 或 absolute 模拟，grid 中使用需注意轨道定义。
用 justify-content: space-between 实现两个块级元素两端对齐
这是最常用、最可靠的方式，适用于导航栏、页眉、工具栏等固定两头、中间留空的布局场景。
关键点在于：父容器必须是 display: flex，且子元素不能设置 flex: 1 或 width: 100%，否则会撑满、失去“分散”效果。
- 子元素之间自动分配剩余空间，不依赖内容宽度
- 如果只有两个子元素，它们会紧贴容器左右边缘，视觉上就是“两端对齐”
- 注意不要给子元素设
margin，否则可能破坏间距计算 - IE10+ 支持，但 IE10/11 需加
-ms-前缀：justify-content: -ms-flex-pack: justify;
示例：
<div class="header">
<span>Logo</span>
<nav>Home · About · Contact</nav>
</div>
<style>
.header {
display: flex;
justify-content: space-between;
}
</style>
用 text-align: justify + text-align-last: justify 实现单行文字两端对齐
这不是“两个元素”，而是让一行文本的首尾字符分别贴住左右边界。常见于表单 label、标题、卡片信息行等窄区域排版。
纯 text-align: justify 在只有一行时无效（浏览器默认左对齐），必须配合 text-align-last: justify 才生效。
-
text-justify: distribute-all-lines是 IE 专属，现代浏览器不支持，也不需要 - 若文字过短（比如只有 2–3 个汉字），浏览器可能无法合理拉伸字间距，效果不可控
- 中英文混排时，空格和标点会影响对齐位置，建议统一用
word-break: keep-all防止断词 - 移动端 Safari 对
text-align-last支持较晚（iOS 14.5+），低版本会回退为左对齐
示例：
<div class="label">姓名</div>
<style>
.label {
text-align: justify;
text-align-last: justify;
width: 120px;
height: 1.5em;
}
</style>
避免误用 float 或 position: absolute 模拟两端对齐
老式写法容易踩坑：比如左 float 一个元素，右 float 另一个，看似可行，但一旦父容器高度塌陷或子元素换行，布局就失控。
绝对定位更危险——它脱离文档流，后续元素无法自然排列，响应式下极易错位。
-
float必须配clear: both或 BFC 触发，否则父容器高度为 0 -
position: absolute要求父容器position: relative，且 left/right 值需手动计算，无法自适应内容宽度 - 两者都不支持 flex 容器内嵌套，和现代布局体系冲突
grid 布局中用 justify-content: space-between 的注意事项
Grid 容器也支持 justify-content: space-between，但它只作用于**轨道间空隙**，不是子元素本身；若子元素数量 > 2，行为和 flex 不同。
- 仅当 grid 容器显式定义了列轨道（如
grid-template-columns: auto 1fr auto），才推荐用 grid 控制两端 - 若只是两个子项，用 flex 更轻量、语义更明确
- Grid 中若未设
grid-auto-flow: column，多子项仍按行排列，space-between可能不生效 - 旧版 Safari（justify-content 在 grid 中的支持有 bug，建议降级到 flex
text-align 去套 div 布局，或者在 flex 里给子项加了 margin-left: auto 这种冗余写法。记住：目标是两个独立元素？用 flex + space-between；目标是一行文字首尾贴边？用 text-align + text-align-last。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
