如何在保留flex-grow属性的前提下，使Flexbox换行后剩余元素的宽度与兄弟元素保持一致

这个问题确实是flex布局里挺常见的小痛点——既要让前面几行的元素通过flex-grow填满容器避免右侧空白，又不想最后一行元素因为数量少被过度拉伸。我给你两个实用的解决方案：

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

CSS Grid在这种场景下的表现比Flex更直观，只需要简单修改容器的布局属性，就能完美实现你要的效果：

.myparent {
  display: grid;
  padding: 5px;
  /* 自动填充列，每列最小200px，剩余空间均分 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; /* 替代子元素的margin，更简洁可控 */
  border: 1px solid #eeedf3;
  background: #f4f3f8;
}
.myelement {
  border: 1px solid #eeedf3;
  border-radius: 7px;
  padding: 10px 8px;
  background: white;
  transition: all ease 0.25s;
  max-height: 50px;
  overflow: hidden;
}

原理说明： #

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 会自动计算容器宽度能容纳多少个最小200px的列，每列的最大宽度会均分剩余空间，确保每行都填满容器。最后一行的元素宽度会和前面行的完全一致，不会出现拉伸过度的情况，同时也不会留下右侧空白。用gap替代子元素的margin还能避免margin折叠的问题，布局更整洁。

方法二：Flex布局配合伪元素占位 #

如果你一定要保留Flex布局，可以给容器添加一个伪元素来“占位”，消耗最后一行的剩余空间，让真实元素不会被flex-grow拉伸：

.myparent {
  display: flex;
  padding: 5px;
  flex-wrap: wrap;
  border: 1px solid #eeedf3;
  background: #f4f3f8;
}
/* 添加伪元素占位 */
.myparent::after {
  content: "";
  flex: 1 1 200px; /* 和子元素的flex属性保持一致 */
  margin: 5px; /* 和子元素的margin保持一致 */
}
.myelement {
  margin: 5px;
  border: 1px solid #eeedf3;
  border-radius: 7px;
  flex: 1 1 200px; /* 合并flex-grow、flex-shrink、flex-basis */
  padding: 10px 8px;
  background: white;
  transition: all ease 0.25s;
  max-height: 50px;
  overflow: hidden;
}

原理说明： #

伪元素::after设置了和子元素完全相同的flex属性和margin，它会占据最后一行的剩余空间，让真实的子元素无法获得额外的拉伸空间，从而保持和上面行一致的宽度。即使最后一行刚好填满容器，伪元素会被挤到下一行，但因为它是空内容，不会影响视觉效果。

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