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

这确实是Flex布局里挺头疼的一个小问题——明明前面满行的元素宽度都整齐划一，最后一行因为剩了空间，元素就被拉得宽出一截，还不想用JavaScript来处理对吧？我给你几个纯CSS的解决方案，完全不用写一行JS：

方法一：用CSS Grid替代Flex（最推荐） #

其实Grid才是处理这种“等宽列自动填充”场景的最佳选择，代码简洁还没Flex的那些小毛病。你只需要把容器的display改成grid，然后用grid-template-columns来定义列的规则：

.grid-container {
  display: grid;
  /* 自动填充尽可能多的列，每列至少100px，多余空间均匀分配 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  background-color: #f1f1f1;
  /* 如果需要元素之间的间距，直接加gap就行，和Flex用法一致 */
  /* gap: 10px; */
}

.grid-container > div {
  background-color: DodgerBlue;
  color: white;
  min-height: 100px; /* 保持和原布局类似的高度 */
}

原理很简单：auto-fill会让容器自动生成尽可能多的列，minmax(100px, 1fr)保证每一列至少有100px宽，容器的多余空间会均匀分给所有列——哪怕最后一行元素数量不够，每一个元素的宽度也会和前面满行的完全一致，完美解决你的问题。

方法二：如果一定要用Flex，用伪元素占位 #

要是你因为某些原因必须保留Flex布局，那可以给容器加一个伪元素，让它“占掉”最后一行的剩余空间，这样元素就不会被拉伸了：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  /* 有间距的话要注意，伪元素的宽度得包含间距 */
  /* gap: 10px; */
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px; /* 这里用固定宽度代替min-width，避免拉伸 */
  min-height: 100px;
}

/* 伪元素占据剩余空间，让最后一行元素保持固定宽度 */
.flex-container::after {
  content: "";
  flex: 1 0 100px; /* 宽度和元素一致，能占满剩余空间 */
  /* 如果有间距，这里要改成calc(100px + 10px) */
}

⚠️ 注意：如果最后一行刚好排满所有元素，这个伪元素会跑到下一行，可能会多出一块空白。你可以通过媒体查询，在容器刚好能排满元素的屏幕尺寸下隐藏伪元素，不过相比之下还是Grid方法更省心。

补充：为什么你的原Flex代码会出问题？ #

看你给出的代码片段，元素设置了min-width: 100px，如果同时还加了flex: 1（或者flex-grow: 1），那当容器有剩余空间时，元素就会被拉伸。要是你不想用上面的方案，也可以直接去掉flex: 1，给元素设置固定宽度width: 100px，再把容器的justify-content设为flex-start——不过这样最后一行会靠左对齐，可能不是你想要的居中或均匀分布效果，所以还是前面两个方案更实用。

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