通过将 .products-box 的宽度设为 25% 并配合 flex-wrap: wrap，可确保在容器宽度足够时每行精确排列 4 个等宽商品卡片，且自动换行适配剩余元素。

通过将 `.products-box` 的宽度设为 `25%` 并配合 `flex-wrap: wrap`，可确保在容器宽度足够时每行精确排列 4 个等宽商品卡片，且自动换行适配剩余元素。

要实现每行显示 4 个 Flexbox 商品卡片（.products-box），关键在于控制子项宽度与父容器布局逻辑的协同，而非仅依赖固定像素值（如原代码中的 200px）。当父容器 .products-container 宽度为 100% 时，4 个等宽子项需各占 25% —— 这样无论视口大小如何（只要未触发响应式断点），都能稳定维持“4 列”结构。

以下是核心 CSS 修改要点：

.products-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 允许换行，必不可少 */
  justify-content: space-evenly; /* 可选：控制水平间距分布 */
}

.products-box {
  width: 25%; /* ✅ 关键：4 × 25% = 100%，完美填满一行 */
  height: 200px;
  background-color: lightpink;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 200px;
  box-sizing: border-box; /* 确保 padding/border 不影响 25% 宽度计算 */
}

⚠️ 注意事项：

• 若 .products-container 存在 padding 或子项存在 margin，需用 box-sizing: border-box 配合百分比宽度，避免溢出换行；
• justify-content: space-evenly 在 4 项时会均匀分配空白，但若列数动态变化（如响应式中变为 3 列），建议改用 justify-content: flex-start + gap: 1rem（现代推荐）以获得更可控的间距；
• 如需兼容旧版浏览器（不支持 gap），可用 margin-right 配合 :nth-child(4n) 清除最后一列右距。

✅ 进阶优化（推荐）：
使用 gap 替代 justify-content 控制间距，语义更清晰、行为更稳定：

.products-container {
  gap: 16px; /* 统一行列间距 */
  justify-content: flex-start; /* 避免因空隙导致最后一列错位 */
}

.products-box {
  width: calc(25% - 12px); /* 减去 gap 占用（16px gap → 每项分摊 12px 水平空间） */
  /* 或更稳妥地：用 grid 实现 4 列——但本题明确要求 flexbox 方案 */
}

总结：百分比宽度 + flex-wrap 是 Flexbox 多列布局的基础解法。牢记“总宽度守恒”原则（4 × 25% = 100%），再结合 box-sizing 和 gap/margin 的合理运用，即可稳健实现每行 4 项的响应式商品网格。