Flex项目换行异常求助：第二行无法对齐第一行下方

问题原因 #

你的flex容器设置了min-height，而flex默认的align-content属性值为stretch——当容器高度大于内容总高度时，所有flex行将被垂直拉伸并均匀分布在容器内，这就导致第二行元素跑到了容器中间位置。

解决方案 #

只需给.grid_product_images添加align-content: flex-start;，让所有flex行紧贴容器顶部排列，同时保留你设置的最小高度和间距要求：

.grid_product_images {
  --gpi-item-size: 6rem;
  --gpi-gap: 0.5rem;
  --gpi-columns: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gpi-gap);
  /* 修正max-width计算：内部列间距为columns-1个，加上左右padding */
  max-width: calc(var(--gpi-item-size) * var(--gpi-columns) + var(--gpi-gap) * (var(--gpi-columns) - 1) + 2 * var(--gpi-gap));
  /* 修正min-height：3个item高度 + 2个行间距 + 上下padding，确保容器最小高度为3行高度 */
  min-height: calc(var(--gpi-item-size) * 3 + var(--gpi-gap) * 2 + 2 * var(--gpi-gap));
  align-items: flex-start;
  align-content: flex-start; /* 添加该行，让flex行顶部对齐 */
  padding: var(--gpi-gap);
  border-radius: 0.5rem;
  background-color: grey;
}
.grid_product_images > div {
  width: var(--gpi-item-size);
  height: var(--gpi-item-size);
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
  cursor: pointer;
}
.grid_product_images .btn_add_image {
  width: 100%;
  height: 100%;
  background-color: white;
  border: 0.1rem solid black;
  border-radius: 0.5rem;
  cursor: pointer;
}

额外说明 #

• 同步修正了max-width和min-height的计算逻辑，确保容器尺寸符合预期：
  • 内部列间距应为columns-1个（3列对应2个间距），加上左右padding，max-width计算更精准。
  • min-height包含3个元素高度、2个行间距（3行对应2个间距）以及上下padding，满足你“容器最小高度为3个项目高度”的需求。

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