flex-wrap:wrap属性致子div尺寸不均？如何修复该问题？

嘿，我来帮你搞定这个flex布局的问题～首先咱们先拆解下你遇到的两个核心问题：

为什么子元素尺寸会不均匀？ #

你给.child设置了flex:1，这个属性是flex-grow:1、flex-shrink:1、flex-basis:0%的简写，它会让flex子元素自动填充容器的剩余空间。当最后一行元素数量不足时，这些剩余空间会被分配给最后一行的元素，导致它们被水平拉伸，尺寸就变不均了。另外，你的代码里还有几个无效/多余的属性：length:100px是错误写法（应该是height），display: inline; float:left;在flex子元素里完全没用，flex布局会直接忽略这些属性。

修复方案：让所有子元素尺寸一致 + 最后一行居中 #

方案1：所有行居中（最简单） #

如果你接受所有行都居中显示，那这个方案最直接：

.container{
  margin: 0 auto;
  flex-wrap: wrap;
  width: 100%;
  padding:10px;
  display:flex;
  justify-content: center; /* 让所有行居中 */
  gap: 20px; /* 用gap代替margin，更简洁地控制间距 */
}

.child{
  /* 移除flex:1，避免元素被拉伸 */
  flex: 0 0 calc(25% - 20px); /* 每行最多4个，减去gap的20px，保证尺寸一致 */
  height:100px; /* 修正错误的length属性 */
  border:2px solid gray;
  padding:65px;
  text-align: center;
  box-sizing: border-box; /* 让padding/border包含在宽度内，避免尺寸溢出 */
}

关键属性解释：

• flex: 0 0 calc(25% - 20px)：flex-grow:0禁止元素拉伸，flex-shrink:0禁止元素收缩，flex-basis设置固定基础宽度，确保所有子元素尺寸完全一致。
• gap:20px：代替子元素的margin，避免margin折叠问题，同时更方便统一控制间距。
• box-sizing: border-box：让元素的padding和border都包含在设置的宽度内，不会额外增加元素总宽度，尺寸计算更准确。

方案2：前面行左对齐，最后一行居中 #

如果你希望前面的行保持左对齐，只有最后一行居中，可以用伪元素填充剩余空间的技巧：

.container{
  margin: 0 auto;
  flex-wrap: wrap;
  width: 100%;
  padding:10px;
  display:flex;
  justify-content: flex-start; /* 前面的行左对齐 */
  gap: 20px;
}

/* 添加伪元素填充最后一行的剩余空间 */
.container::after {
  content: "";
  flex: auto;
}

.child{
  flex: 0 0 calc(25% - 20px);
  height:100px;
  border:2px solid gray;
  padding:65px;
  text-align: center;
  box-sizing: border-box;
}

这个方法的原理是：容器的伪元素会占据最后一行的剩余空白，从而把最后一行的子元素“挤”到居中位置，而前面的行依然保持左对齐。

你可以根据自己的视觉需求选择其中一个方案，这样就能完美解决你遇到的问题啦～

内容的提问来源于stack exchange，提问作者J.Doe