如何使用 Flexbox 实现每行显示 4 个商品卡片-html教程-PHP中文网

如何使用 Flexbox 实现每行显示 4 个商品卡片

本文详解如何通过设置 .products-box 宽度为 25% 并配合 flex-wrap: wrap，在响应式布局中稳定实现每行 4 列的 Flexbox 商品网格，兼顾等宽分布与自动换行。

本文详解如何通过设置 `.products-box` 宽度为 `25%` 并配合 `flex-wrap: wrap`，在响应式布局中稳定实现每行 4 列的 flexbox 商品网格，兼顾等宽分布与自动换行。

要让 .products-box 元素严格每行显示 4 个，核心在于控制子项宽度与父容器的弹性行为协同工作。当前代码中 .products-box 使用固定宽度 200px，会导致列数随视口变化（例如小屏下可能挤成 2 列甚至 1 列），无法保证“始终 4 个/行”。

✅ 正确做法是：将 .products-box 的宽度设为相对单位 25%，并确保父容器 .products-container 启用 flex-wrap: wrap（已存在）和 display: flex（也已存在）。这样每个子项占据父容器宽度的四分之一，自然实现 4 列等宽布局：

.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 不撑大宽度 */
}

⚠️ 注意事项：

必须保留 box-sizing: border-box（已在通配符中声明），否则内边距或边框会使实际宽度 > 25%，导致第 4 个元素被迫换行；
若需添加间距（如 margin），建议改用 gap 属性（现代方案）或通过 padding + background-clip 控制视觉间隙，避免破坏 25% 布局逻辑；
当商品数量不是 4 的倍数（如 7 个），最后一行会自动左对齐显示剩余项（3 个），符合“even if not”要求；若需最后一行居中，可改用 justify-content: center，但会牺牲前几行的均匀性；
如需响应式降级（如移动端改为 2 列），应配合媒体查询：
```
@media (max-width: 768px) {
  .products-box { width: 50%; }
}
```