分页组件通过Flexbox可轻松实现布局对齐与响应式适配。首先将容器设为display: flex，结合justify-content: center实现页码居中；利用flex-wrap: wrap支持换行以适应窄屏，通过media query优化小屏显示；若需“上一页”左对齐、“下一页”右对齐且中间页码居中，可使用justify-content: space-between并嵌套flex容器精确控制。整体结构简洁，维护方便，核心在于合理运用justify-content、flex-wrap等属性满足多场景布局需求。
在构建分页组件时，CSS Flexbox 提供了一种简洁、灵活的方式来对齐和分布页码按钮。无论是居中显示、两端对齐，还是响应式适配，Flexbox 都能轻松应对。
基本结构与 Flex 容器设置
分页组件通常由一个容器包裹多个页码项（如“上一页”、“数字页码”、“下一页”）。使用 Flexbox 时，只需将外层容器设为 flex 模式：
.pagination { display: flex; list-style: none; padding: 0; margin: 20px 0; } .pagination li { margin: 0 4px; } .pagination a { text-decoration: none; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; color: #007cba; }
这样所有页码项会自动水平排列，并可通过 margin 控制间距。
居中对齐页码
多数设计要求分页居中显示。通过 justify-content: center 可轻松实现：
立即学习“前端免费学习笔记（深入）”；
.pagination { display: flex; justify-content: center; }
即使页数变化，布局仍保持居中，无需计算宽度或使用绝对定位。
响应式处理与空间分配
在窄屏设备上，可利用 flex-wrap 允许换行，避免溢出：
.pagination { display: flex; flex-wrap: wrap; justify-content: center; } .pagination li { flex: 1 0 auto; text-align: center; }
也可结合媒体查询，在小屏幕上压缩部分按钮（如省略中间页码），Flexbox 会自动重新分布剩余项。
“上一页”与“下一页”两端对齐
若希望“上一页”靠左、“下一页”靠右，中间页码居中，可用 auto margin 或 space-between：
.pagination { display: flex; justify-content: space-between; max-width: 600px; margin: 0 auto; } .pagination li:first-child { flex: 1; } .pagination li:last-child { flex: 1; }
中间的页码可用嵌套 flex 容器单独居中，实现更精细控制。
基本上就这些。Flexbox 让分页布局变得直观且维护简单，不复杂但容易忽略细节。合理运用 justify-content、align-items 和 flex-wrap，就能覆盖大多数设计需求。