本文讲解如何通过设置 width: 25% 并结合 flex-wrap: wrap，使 .products-box 元素在 .products-container 中稳定实现每行 4 个、自适应排列的布局效果。
本文讲解如何通过设置 `width: 25%` 并结合 `flex-wrap: wrap`，使 `.products-box` 元素在 `.products-container` 中稳定实现每行 4 个、自适应排列的布局效果。
要让 Flexbox 子容器（如 .products-box）严格按「每行 4 个」均匀排列，核心在于控制单个子项占据父容器宽度的精确比例。由于父容器 .products-container 宽度为 100%，且采用 display: flex + flex-wrap: wrap，只需将每个 .products-box 的宽度设为 25%，即可自然实现四列等宽布局：
.products-box {
width: 25%; /* 关键：4 × 25% = 100%，无间隙时完美填满一行 */
height: 200px;
background-color: lightpink;
color: white;
font-size: 20px;
text-align: center;
line-height: 200px;
}
⚠️ 注意事项：
-
必须保留
flex-wrap: wrap（已在.products-container中声明），否则超出一行的子项会被强制压缩或溢出； - 若需响应式适配（如小屏下变为 2 列），建议配合媒体查询动态调整宽度（例如
@media (max-width: 768px) { .products-box { width: 50%; } }）； - 当前使用
justify-content: space-evenly可能导致列间间距不均——因width: 25%已占满整行，实际已无多余空间分配“间隙”。若需留白，推荐改用gap: 16px（现代浏览器支持）或为.products-box添加margin-right并配合:nth-child(4n)清除右外边距； - 确保父容器
.products-container没有额外 padding 或 border 影响总宽度计算（box-sizing: border-box已全局启用，这点已优化）。
最终效果：8 个 .products-box 将整齐呈现为 2 行 × 4 列，无论内容多少均保持结构稳定，且具备良好的可扩展性（新增第 9 项将自动进入第 3 行）。
