justify-content: space-between 未生效主因是容器缺宽度或子元素非直系；需确保 .prev/.next 为 flex 容器直接子项，避免包裹标签、空节点；隐藏项用 visibility: hidden 保布局；小屏改 column 布局；优先用 space-between 而非 margin:auto。
justify-content: space-between 在分页导航中为什么没生效
直接写 justify-content: space-between 却发现上一篇、下一篇没撑开，大概率是容器缺少明确宽度或子元素被包裹在额外的父级里。Flex 布局只对**直系子元素**起作用，如果 .prev 和 .next 外面包了一层 <div> 或被 <p> 包裹，它们就不是 flex 容器的直接子项，space-between 自然无效。
常见错误结构：
<nav class="pagination"> <p><a href="..." class="prev">上一篇</a></p> <p><a href="..." class="next">下一篇</a></p> </nav>
正确做法是让 .prev 和 .next 成为 .pagination 的直接子元素：
<nav class="pagination"> <a href="..." class="prev">上一篇</a> <a href="..." class="next">下一篇</a> </nav>
- 确保
.pagination设置了display: flex和justify-content: space-between - 避免中间插入空文本节点或匿名 inline 元素（比如换行符 + 空格）——它们会被当作 flex item，破坏两端对齐
- 若需居中“当前页”文字，不要用额外
<span>占位，而应改用justify-content: space-around或配合margin: auto
当上一篇或下一篇缺失时如何保持布局稳定
真实场景中，首篇文章没有“上一篇”，末篇文章没有“下一篇”，如果直接隐藏对应链接，space-between 会把剩下一个元素拉到边缘，破坏视觉平衡。
立即学习“前端免费学习笔记（深入）”；
解决思路不是靠 JS 动态增删 DOM，而是用 CSS 控制可见性并保留占位：
- 用
visibility: hidden替代display: none，这样元素仍参与 flex 排列 - 给隐藏项设置
opacity: 0+pointer-events: none防止误点 - 更稳妥的做法是服务端或构建时就输出两个
<a>，空链接则加aria-disabled="true"并禁用样式
示例：
.pagination a[aria-disabled="true"] {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
移动端小屏下 space-between 导致换行错乱
当屏幕变窄，两个链接文字过长，flex-wrap: nowrap（默认值）会让它们溢出容器；若设成 wrap，又可能把两个链接挤到同一行再折成两行，失去“左右对齐”语义。
推荐组合策略：
- 给
.prev和.next设flex: 1 1 0，允许收缩但不放大 - 用
min-width: fit-content防止文字被过度挤压换行 - 搭配媒体查询，在小屏下改用
flex-direction: column+align-items: stretch，让上下篇垂直堆叠、各自撑满
关键代码片段：
@media (max-width: 480px) {
.pagination {
flex-direction: column;
}
.pagination a {
text-align: center;
}
}
justify-content: space-between 和 margin: auto 的取舍
有人用 margin-left: auto 放右链接，看似更轻量。但它本质是“推挤”行为，依赖兄弟元素存在；而 space-between 是声明式分布逻辑，语义更清晰，也更容易配合 gap 控制间距。
真正要注意的是兼容性：
-
justify-content: space-between在 IE10+ 完全支持，无需前缀 - 但若项目需支持 IE9 及更早版本，则必须降级为 float + clearfix 或绝对定位
-
gap属性在 flex 中是较新特性（Chrome 84+/Firefox 63+），旧版需用margin模拟
别忽略 flex 容器的 align-items 默认值是 stretch —— 如果链接行高不一致，可能看起来上下不对齐，建议统一设为 align-items: center。
