分页栏应使用 justify-content: space-between 而非 space-around，因后者首尾外侧多出半间距导致视觉不均；space-between 使首末项贴边、中间间隙均等，但需确保父容器有明确宽度、子项宽度可控，并注意 ie11 兼容性问题。
justify-content: space-around 在分页栏里为什么看起来“不等距”
因为 space-around 给每个子项**两侧**都分配相等的空白，首尾项外侧也有一份间隙，导致第一项左边、最后一项右边多出一份“半间距”，视觉上两端被“推远”，中间项间距反而略小。分页栏通常需要的是首尾贴边、中间均匀——这和 space-around 的行为天然冲突。
真正适合分页栏的是 justify-content: space-between
它把可用空间平均分配给**子项之间的间隙**，首项左对齐容器，末项右对齐容器，中间所有间隔完全一致。这是分页栏最常用、最直观的布局方式。
- 只适用于子元素数量 ≥ 2；若只有 1 个页码，
space-between不产生任何间隙，表现正常 - 必须确保父容器有明确宽度（比如
width: 100%或固定值），否则 flex 容器可能收缩，导致对齐失效 - 子项不能设
flex: none或width: auto同时又内容长度差异极大（比如 “1” 和 “…”，后者容易撑宽），建议统一用flex: 0 0 auto+min-width控制最小占位
当页码动态增减时，space-between 会突然跳动？
会。比如从 5 个页码（4 个间隙）变成 6 个（5 个间隙），总空隙数变化，每个间隙宽度重算，所有按钮位置偏移。用户点击时可能误触邻项。
- 解决方案不是换 justify 方式，而是加过渡：给
justify-content加transition: justify-content 0.15s ease（仅 Safari 支持，慎用） - 更可靠的做法是固定子项宽度 +
space-between，例如：width: 36px; height: 36px;，让间隙变化只影响空白，不影响按钮本身位置 - 如果要用省略号
"..."，务必用等宽字体或设font-variant-numeric: tabular-nums，避免宽度抖动
IE11 下 justify-content 不生效？检查 display 和 flex-direction
IE11 对 Flex 支持有硬伤：justify-content 在 flex-direction: column 下完全无效；且如果父容器是 inline-flex，某些版本会忽略 space-between。
- 确保父容器是
display: flex（非inline-flex） - 显式声明
flex-direction: row（IE11 默认值有时不可靠） - 避免在 flex 容器上同时使用
text-align: center，IE11 中它会干扰主轴对齐 - 真要兼容 IE11，备用方案是用
margin-left: auto+margin-right: auto手动控制关键项（如当前页），但维护成本高
space-between 和固定尺寸、最小宽度、字体设置绑在一起用，而不是指望单个属性自动兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
