Flex 三列布局：justify-content:space-between 导致最后一行留白问题及解决方案

这个问题困扰了我一年，没有AI的时候尝试了各种方法如添加一个空元素等各种方法都不奏效。当时只好放弃，但是现在有了AI，就在想试试，结果还是一样，问题很多。直到我直接发页面链接给hermes，让他给我设计，他设计出了等分三格的思路，但是在小屏幕上会很挤。我灵机一动，小屏幕还是用原来的justify content：space between。这样就完美解决了。

在 namehonor.com 的 News 分类页面中，文章列表使用 Flexbox space-between 实现三列等宽布局。但当文章总数不是 3 的倍数时，最后一行会出现中间大片留白的问题。

问题复现

CSS 规则如下：

.all-blog-articles {    display: flex;    flex-flow: row wrap;    justify-content: space-between;}.blogposts-list {   /* article.fbox 卡片 */    flex: 1 1 30%;    max-width: 30%;}

space-between 的逻辑是把剩余空间均匀分配到项目之间。当一行有 3 张卡片时（30%+30%+30%=90%），剩余 10% 被均匀分配到 2 个间隙中，每边 5%，视觉均匀。

但最后一行只剩 2 张卡片时（30%+30%=60%），剩余 40% 被全部塞到中间的一个间隙里——两张卡片被推向两端，中间出现极大的空白。

解决方案

核心思路：桌面端用 flex-start + margin-right 精确控制间距，平板/手机保留原始 space-between。

/* 桌面端 ≥1024px — 三列等宽 */@media (min-width: 1024px) {  .all-blog-articles {    justify-content: flex-start;    gap: 0;  }  .all-blog-articles > .blogposts-list {    flex: 0 0 calc((100% - 60px) / 3);    max-width: calc((100% - 60px) / 3);    margin-right: 30px;  }  .all-blog-articles > .blogposts-list:nth-child(3n) {    margin-right: 0;  }  /* 分页器占满行 */  .all-blog-articles > .pag-wrapper {    flex: 0 0 100%;    max-width: 100%;  }}/* <1024px 保留原始 space-between 不变 */

关键要点

• flex-start：保证所有项目从左开始排列，不会把最后一行撑开
• margin-right: 30px：手动控制卡片之间的间距，第 3n 项置零
• calc((100% - 60px) / 3)：精确计算每项宽度，减去 2 个 30px 缝隙
• flex: 0 0：禁止伸缩，宽度完全由 calc 控制
• 媒体查询 ≥1024px：只在桌面端生效，平板/手机端不影响现有布局

为什么不直接用 ::after 伪元素填补

之前尝试用 ::after 填充最后一行缺失的位置（文章总数 % 3 == 2 时补一个空位），但无法稳定生效：

• ::after 的宽度必须和真实卡片完全一致（flex: 1 1 30% vs flex: 0 0 32% 这种细微差异都会导致问题）
• 容器内还有 .page-header 和 .pag-wrapper 等多个 flex 子项干扰
• WordPress 主题的结构复杂，伪元素方案在频繁的内容变动下不可靠

最终方案简单直接——桌面端切换 flex-start + 固定间距，彻底根治。

调整后：