使用Flex布局可轻松创建美观分页组件：1. 用ul构建分页结构，包含上/下一页和页码按钮；2. 通过display:flex实现水平排列与居中对齐，gap设置间距；3. 为a标签添加样式，利用.active高亮当前页，transition实现过渡效果；4. 响应式设计适配小屏幕，调整padding和字体大小；5. 结合语义化HTML与CSS交互状态，提升用户体验。
分页组件是网页中常见的交互元素，尤其在内容列表较多时用于分页导航。使用 CSS 的 Flex 布局可以轻松实现分页项的对齐与分布，结合 active 状态能直观标识当前页。下面是一个简单的 CSS 初级项目示例，教你如何用 Flex 布局制作一个美观且可交互的分页组件。
1. HTML 结构设计
分页组件通常由一组数字按钮和“上一页”、“下一页”组成。我们使用无序列表 来构建结构，保持语义清晰：
<div class="pagination">
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
2. 使用 Flex 布局排布分页项
通过 Flex 布局让分页项水平排列并居中显示，容器自动分配间距：
.pagination {
display: flex;
justify-content: center;
margin: 20px 0;
}
<p>.pagination ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
}
说明： - display: flex 让 ul 内的 li 水平排列
- justify-content: center 使整个分页组件在父容器中居中
- gap: 8px 设置分页按钮之间的间距，比 margin 更简洁
3. 样式美化与 active 状态控制
为分页链接添加统一样式，并突出当前页（active）：
立即学习“前端免费学习笔记（深入）”；
.pagination a {
text-decoration: none;
padding: 8px 12px;
border: 1px solid #ddd;
color: #007bff;
border-radius: 4px;
transition: all 0.3s ease;
}
<p>.pagination a:hover {
background-color: #007bff;
color: white;
border-color: #007bff;
}</p><p>.pagination a.active {
background-color: #007bff;
color: white;
border-color: #007bff;
cursor: default;
}
关键点： - 使用 transition 实现颜色过渡动画，提升用户体验
- .active 类表示当前页，视觉上高亮
- hover 和 active 状态样式一致，符合用户预期
4. 可选优化：响应式处理
在小屏幕上，可适当缩小按钮尺寸以适应屏幕：
@media (max-width: 600px) {
.pagination a {
padding: 6px 10px;
font-size: 14px;
}
}
基本上就这些。通过 Flex 布局快速搭建结构，再用 CSS 控制外观和交互状态，就能完成一个实用的分页组件。不复杂但容易忽略细节，比如去掉默认列表样式、设置圆角和过渡效果，能让组件更专业。后续可结合 JavaScript 实现动态页码切换。
