如何结合space-evenly与:after伪元素实现元素对齐并预留空间？

问题根源在于你添加的:after伪元素设置了flex: auto，它会在最后一行占据一个弹性项的空间，破坏了justify-content: space-evenly的分布逻辑，导致最后一行区块无法与上方行对齐。以下是几种可行的解决方法：

方法一：用Flex+Gap替代Space-Evenly（推荐） #

直接使用Flex的gap属性设置区块间的间距，无需依赖伪元素或space系列属性，天然保证最后一行对齐：

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  gap: 10px; /* 同时设置水平和垂直间距 */
  padding: 0 10px; /* 可选：让左右边缘间距与中间一致 */
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  /* 移除margin-bottom，用gap的垂直间距替代 */
}

方法二：限制伪元素的最大宽度 #

若要保留space-evenly，可以给:after伪元素设置最大宽度，使其不超过单个区块的宽度，避免挤占最后一行布局空间：

.exposegrid {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  &:after {
    content: "";
    flex: auto;
    max-width: 100px; /* 与单个区块宽度一致 */
  }
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

方法三：改用Grid布局（更适合网格场景） #

Grid布局天生适配这种均匀分布的网格需求，无需额外伪元素就能完美实现对齐：

.exposegrid {
  width: 500px;
  display: grid;
  /* 自动填充每行，每个区块最小100px，最大占满剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px; /* 设置区块间的间距 */
  padding: 0 10px; /* 可选：让左右边缘间距与中间一致 */
}

.exposetab {
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

内容的提问来源于stack exchange，提问作者leoprosy