如何实现每行4个Flex布局项且不足4个时不拉伸？

你的核心问题是**flex-grow:1**导致不足4个项目的行被拉伸——这个属性会让项目自动填充行内剩余空间。下面给你几种直接可行的解决方案：

方法一：用Grid布局（推荐，代码更简洁） #

Grid天生适配这种固定列数的布局需求，无需额外处理最后一行的拉伸问题：

.item-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 强制每行4列 */
  gap: 20px; /* 用gap代替margin控制项目间距，避免计算错误 */
  padding: 10px; /* 可选，给容器加内边距，让边缘项目不贴边 */
}

.item {
  background-color: rgba(250, 250, 210);
  color: black;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 20px;
}

解释：repeat(4,1fr)会把容器宽度平均分成4份，gap自动处理项目间的间距，最后一行不足4个的项目会保持原宽度，不会强行填满整行。

方法二：调整Flex属性，禁用拉伸 #

如果你坚持用Flex布局，只需要修改两个地方：

.item-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 项目左对齐，不填充剩余空间 */
}

.item {
  display: flex;
  flex: 0 0 calc(25% - 20px); /* 把flex-grow设为0，禁止拉伸；同时修正宽度计算（原40px多算了） */
  background-color: rgba(250, 250, 210);
  color: black;
  flex-direction: column;
  padding: 10px;
  margin: 10px;
  border-radius: 20px;
}

解释：

• flex:0 0 xxx 中的第一个0是flex-grow:0，禁止项目拉伸；第二个0是flex-shrink:0，保证项目不会被压缩。
• 宽度计算修正为calc(25% - 20px)：每个项目左右各10px margin，4个项目的总margin占用的宽度平均到每个项目就是20px，这样总宽度刚好适配容器。

方法三：用伪元素填充剩余空间（兼容旧场景） #

如果需要保留原flex:1的压缩能力，又不想最后一行拉伸，可以给容器加伪元素占位：

.item-container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  flex: 1 0 calc(25% - 20px);
  background-color: rgba(250, 250, 210);
  color: black;
  flex-direction: column;
  padding: 10px;
  margin: 10px;
  border-radius: 20px;
}

.item-container::after {
  content: '';
  flex: 1 0 calc(25% - 20px);
  margin: 10px;
}

解释：伪元素和项目的尺寸、间距一致，会自动填充最后一行的剩余位置，让前面的项目保持原宽度，不会拉伸。

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