通过将 .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 项的响应式商品网格。
