本文介绍如何通过CSS Flexbox将商品卡片（.products-box）精确控制为每行显示4个，核心是将子项宽度设为25%并配合flex-wrap实现响应式换行。
本文介绍如何通过css flexbox将商品卡片（`.products-box`）精确控制为每行显示4个，核心是将子项宽度设为25%并配合`flex-wrap`实现响应式换行。
要让 .products-box 元素严格以每行4个均匀排列，关键在于合理设置其宽度与父容器的布局行为。当前代码中每个 .products-box 使用固定宽度 200px，这会导致在不同屏幕尺寸下无法稳定维持4列布局——例如窄屏时可能挤成3列甚至2列，宽屏时又可能留白过多。
✅ 正确做法是：将 .products-box 的宽度设为 25%（即 100% ÷ 4），并确保父容器 .products-container 启用弹性换行：
.products-container {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* 允许子项自动换行 */
justify-content: space-evenly; /* 可选：横向间距分配方式 */
}
.products-box {
width: 25%; /* 每项占满一行的1/4，天然实现4列 */
height: 200px;
background-color: lightpink;
color: white;
font-size: 20px;
text-align: center;
line-height: 200px;
box-sizing: border-box; /* 确保padding/border不破坏25%宽度 */
}⚠️ 注意事项：
-
必须添加
box-sizing: border-box（已在全局重置中声明），否则内边距或边框会使实际宽度超过25%，导致第4个元素被迫换行； - 若需在
.products-box内添加 padding 或 margin，建议改用calc(25% - 8px)配合gap属性（现代方案），或统一使用gap: 16px配合width: calc(25% - 12px)进行微调； - 如需响应式适配（如移动端改为2列），可结合媒体查询：
@media (max-width: 768px) { .products-box { width: 50%; } } @media (max-width: 480px) { .products-box { width: 100%; } }
? 总结：Flexbox 实现等宽多列布局的本质是「按比例分配主轴空间」。width: 25% 是最直接、兼容性最佳（支持所有现代浏览器及 IE11+）的方案；相比 CSS Grid，它在简单均分场景下更轻量、更易维护。
