CSS如何创建分页导航样式？flex布局实战技巧

<ul>

<div>

<li>

<a>

justify-content

<nav class="pagination">
    <a href="#" class="page-link prev">上一页</a>
    <a href="#" class="page-link">1</a>
    <a href="#" class="page-link">2</a>
    <a href="#" class="page-link active">3</a>
    <a href="#" class="page-link">4</a>
    <span class="page-link ellipsis">...</span>
    <a href="#" class="page-link">10</a>
    <a href="#" class="page-link next">下一页</a>
</nav>

.pagination {
    display: flex;
    justify-content: center; /* 让分页条整体居中，也可以是 space-between, flex-start 等 */
    align-items: center; /* 垂直居中对齐，如果元素高度不一的话很有用 */
    list-style: none; /* 如果是ul li，去除默认列表符号 */
    padding: 0;
    margin: 20px 0; /* 给分页条一些上下空间，避免贴边 */
    flex-wrap: wrap; /* 关键：当空间不足时，允许页码自动换行 */
}

.page-link {
    display: block; /* 让a标签能设置padding和margin，像块级元素一样 */
    padding: 8px 12px;
    margin: 0 4px; /* 页码项之间的左右间距 */
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease; /* 添加过渡效果，让交互更平滑 */
    white-space: nowrap; /* 防止页码文字（如“上一页”）意外换行 */
    min-width: 32px; /* 确保每个页码按钮有最小宽度 */
    text-align: center; /* 文字居中 */
}

.page-link:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

.page-link.active {
    background-color: #007bff; /* 激活状态的背景色 */
    color: white; /* 激活状态的文字颜色 */
    border-color: #007bff;
    cursor: default; /* 激活状态的页码不可点击，鼠标变成默认箭头 */
    pointer-events: none; /* 彻底禁用点击事件，防止误触 */
}

.page-link.ellipsis {
    border: none; /* 省略号通常不需要边框 */
    background: transparent; /* 背景透明 */
    cursor: default;
    padding: 8px 0; /* 省略号的padding可以调整，让它看起来更像文本 */
    margin: 0 2px; /* 间距可以稍微小一点 */
}

/* 针对前后页按钮可以单独调整样式，比如加粗 */
.page-link.prev,
.page-link.next {
    font-weight: bold;
    color: #007bff;
}

border-collapse

align-content

row-gap

...

active

pointer-events: none

flex-wrap: wrap;

.pagination {
    /* ...其他样式 */
    flex-wrap: wrap;
    gap: 8px; /* 统一的行间距和列间距，避免换行后上下