无需JS实现Flex布局最后一行元素与满行同宽的方案问询

我正在寻找一种无需使用JavaScript的方法，使Flex布局中最后一行元素的宽度与满行元素保持一致。Flexbox看似是可行的解决方案，但问题在于当存在额外空间时，最后一行的元素会变得更宽。请问是否有更优的实现方式？

附当前代码：

.flex-container {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background-color: #f1f1f1;
}
.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  min-width: 100px;
  /* 剩余代码省略 */
}

这个问题确实是Flex布局里的典型痛点——最后一行元素因为剩余空间的分配，总会出现宽度和前面满行元素不一致的情况，而且不想用JS来做计算调整对吧？我有两个纯CSS的解决方案，都不需要JavaScript，推荐你试试：

方案1：用Grid布局替代Flex（最优解） #

Grid布局天生就适合处理这种“等宽列自动填充”的场景，代码比Flex更简洁，完全不需要额外的 hack。只需要设置grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))，就能让所有列的宽度自动保持一致，最后一行也不例外。

示例代码：

.grid-container {
  display: grid;
  /* 自动创建尽可能多的列，每列最小100px，最大占满剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0; /* 如果需要元素间的间距，改成你想要的值比如10px */
  background-color: #f1f1f1;
}
.grid-container > div {
  background-color: DodgerBlue;
  color: white;
  padding: 20px; /* 加内边距让内容更美观 */
}

为什么这个方案更好？ #

• 代码极简，逻辑清晰，没有额外的占位元素
• 自动适配容器宽度，列数会随着容器大小变化而自动调整
• 最后一行元素的宽度和前面完全一致，不会有拉伸问题

方案2：Flex布局下用伪元素占位（兼容必须用Flex的场景） #

如果你因为某些原因必须使用Flex布局，可以通过给容器添加伪元素来“填充”最后一行的剩余空间，让真实元素的宽度和满行保持一致。

示例代码：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  gap: 0; /* 同样可以设置元素间距 */
}
.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  /* flex属性：允许拉伸/收缩，基准宽度100px */
  flex: 1 1 100px;
  min-width: 100px;
  padding: 20px;
}
/* 添加伪元素占位，占据最后一行的剩余空间 */
.flex-container::after {
  content: "";
  /* 和子元素相同的flex属性 */
  flex: 1 1 100px;
  min-width: 100px;
  visibility: hidden; /* 隐藏占位元素 */
  height: 0; /* 避免占位元素占据高度 */
}

注意事项： #

• 伪元素的flex和min-width必须和子元素保持一致，才能准确占位
• 如果最后一行刚好只有一个元素，伪元素会占据一个“隐形”的位置，但元素宽度还是和其他行一致，视觉上没问题

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