justify-content: space-between 能实现两端对齐，但需父容器设 display: flex、子项≥2个且未脱离文档流；单元素时退化为左对齐，多行时最后一行右偏属规范行为，可用 gap 或伪元素补位解决。
justify-content: space-between 能实现两端对齐，但多数“没反应”不是写错了，而是 Flex 根本没生效，或子项没留给它分配空间的机会。
justify-content: space-between 为什么没生效
这不是 CSS 写错，而是 Flex 布局的计算被卡住了。常见原因有：
- 父容器没设
display: flex或display: inline-flex（只写flex-direction不够） - 子元素总宽度 ≥ 容器宽度，比如每个都写了
flex: 1或width: 100%，没剩空隙可分 - 只有一个子元素：
space-between只在两个及以上子项时触发，单个默认左对齐 - 子元素用了
position: absolute或float，脱离文档流后 Flex 就当它不存在 - 旧版 Safari 对纯文本节点不认
space-between，得包一层并设display: block
单行布局下怎么让两端有留白（不是贴边）
justify-content: space-between 天生首尾贴边，它不管左右边距。要“两端内缩 + 中间等距”，别硬调 padding 或 margin，直接上 gap：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 设
gap: 0 16px（第二值是column-gap，控制左右间距） - 同时配
justify-content: flex-start，让子项从左开始排，间隙由gap统一管 - 只要父容器启用了
flex-wrap: wrap（哪怕实际只有一行），gap就稳稳生效 -
gap不吃子项的flex: 1或width干扰，兼容性也比伪元素方案好得多（Chrome 89+、Firefox 63+、Safari 14.1+）
多行换行时最后一行右偏怎么办
这是规范行为，不是 bug。justify-content: space-between 在多行时只作用于每行内部，最后一行不满就右偏。解决思路有两个方向：
- 用伪元素补位：
container::after { content: ""; flex: 0 0 200px; }（宽度需和子项一致；移动端需配合媒体查询重置） - 改用
gap+justify-content: flex-start，再配合margin-right控制每行末尾项，更可控且无补位干扰 - 如果子项宽度不固定（如用
%或flex-basis），伪元素宽度也得用相同单位，否则对不齐 - 别给伪元素设
visibility: hidden或opacity: 0，这会影响 Flex 计算；要用height: 0; overflow: hidden;配合flex: 0 0 0更稳妥
text-align: justify 和 flex 两端对齐的区别
别混用：text-align: justify 是针对**行内内容**的两端对齐，要求文本占满整行且中间有空白符（空格/换行）才生效；而 justify-content: space-between 是针对**Flex 子项**的分布逻辑，两者作用对象完全不同。
把一段文字直接塞进 Flex 容器里，指望 space-between 实现文字两端对齐，基本无效——它只管子元素盒子的位置，不管盒子里的文字怎么排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
