京东方案通过flex布局实现一行6列卡片不强制贴齐版心允许首尾留白减少一层HTML结构。核心.box设宽80%居中flex-wrap:wrap自动换行.item用calc(16.6667%-16px)扣除左右margin8px×2确保6个刚好占满一行同时min/max-width锁定宽度避免拉伸变形。背景直接设在item上缝隙由margin实现无需额外content容器简化结构且视觉留白自然兼顾可维护性与性能。目录第一步先写 HTML第二步CSS 重置 给.box 写样式第三步给.item 写基础样式先设置 margin 制造缝隙第四步给 item 锁定 1/6 宽度第五步使用 calc 扣掉 margin 占用空间第六步京东方案不处理贴边二、逐层分析第 1 层 .box第 2 层 .item栅格卡片京东方案不要求强行把首尾卡片贴齐版心允许首尾自带留白借此少写一层 content 标签简化 HTML 结构。一行 6 列。下面也按真实的写代码顺序来还原第一步先写 HTML搭建外层容器.box 子格子.item写 若干个 item 占位。div classbox div classitem1/div div classitem2/div div classitem3/div !-- ... 16 个 item -- /div第二步CSS 重置 给.box 写样式京东写法flex控制里面所有.item横向排列一行放不下就自动换行不单独套.w版心容器box设置宽度width:80%加上margin:0 auto让这个盒子整体在页面居中限制内容最大宽度不让卡片铺满整个浏览器屏幕。* { margin: 0; padding: 0; box-sizing: border-box; } .box { display: flex; /* 内部子元素横向排列 */ flex-wrap: wrap; /* 空间不足自动换行 */ width: 80%; /* 版心宽度限制 */ margin: 0 auto; /* .box整个容器在页面水平居中 */ border: 1px solid red; /* 红色边框方便观察box边界 */ }刷新效果16 个 div 垂直堆叠。原因item 还没写任何 flex 与宽度规则默认块元素垂直排列。第三步给.item 写基础样式先设置 margin 制造缝隙思路背景色直接写在 item 上缝隙靠 margin 实现。margin:0 8px 16px左右外边距 8px卡片之间横向缝隙 8816px底部外边距 16px行间距。.item { flex: 1; width: 80px; height: 120px; background-color: pink; margin: 0 8px 16px; /* 左右8px缝下边16px行间距 */ }刷新发现16 个格子挤在同一行被拉伸得很细不会换行是淘宝设置margin一样的问题。是因为flex:1等价flex:1 1 0%flex-basis:0。 换行判断发生在拉伸之前浏览器按基准宽度 0 去计算总宽度16 个 0 相加仍然是 0浏览器判定一行放得下永远不会触发换行。第四步给 item 锁定 1/6 宽度想要一行 6 个给 item 限制 1/6 宽度min-width 和 max-width 两头锁死防止拉伸变形。.item { flex: 1; min-width: 16.6666667%; max-width: 16.6666667%; height: 120px; background-color: pink; margin: 0 8px 16px; }刷新一行只能放下 5 个第 6 个卡片直接掉到下一行。margin 在盒子外部box-sizing 只控制 padding/border管不到 margin。 单个 item 占用总空间 自身宽度 (16.6667%) 左 margin8px 右 margin8px6 个总和 6 × 16.6667% 6 × 16px 100% 96px超出 box 一行 100% 宽度放不下第 6 个就要换行了。第五步使用 calc 扣掉 margin 占用空间每个格子自身宽度要减去左右 margin 总和 16px预留 margin 的位置。语法注意calc 内减号左右必须加空格16.6666667%-16px直接写会报错相当于名称.item { flex: 1; min-width: calc(16.6666667% - 16px); max-width: calc(16.6666667% - 16px); height: 120px; background-color: pink; margin: 0 8px 16px; }单个 item 总占位calc(16.6666667% - 16px) 16px (margin) 16.6666667% 6 个总和 100%刚好一行放下 6 个卡片第六步京东方案不处理贴边最后一行不足 6 个时卡片不会被拉伸变宽max-width限制了宽度上限。flex:1本来会拉伸填充空白max-width 钉死最大宽度保证最后一行卡片宽度和上面保持一致min-width负责窗口缩小时宽度压缩到 calc 最小值就不再缩小继续掉行。整组卡片左右两端留白首卡片左边 8px、末卡片右边 8px 每个 item 都带左右 8px margin所以卡片墙整体向内缩进。京东方案不使用负 margin 抵消不去强行贴齐版心边缘。页面底色是白色这层留白视觉上等同于页面留白业务上可以接受以此换取少写一层 HTML。二、逐层分析第 1 层 .box.box { display: flex; flex-wrap: wrap; width: 80%; margin: 0 auto; border: 1px solid red; }width:80%margin:0 auto类似淘宝的版心限制整体宽度、页面居中display:flex开启弹性布局子元素横向排列flex-wrap:wrap一行放不下自动换行。第 2 层 .item栅格卡片.item { flex: 1; min-width: calc(16.6666667% - 16px); max-width: calc(16.6666667% - 16px); height: 120px; background-color: pink; margin: 0 8px 16px; }flex:1有富余空间可以拉伸min-width / max-width calc(16.6666667% -16px)锁死卡片可用宽度提前扣除 margin 占用空间保证 6 个刚好一行margin:0 8px 16pxmargin 在盒子外侧造缝隙相邻卡片左右 margin 叠加得到横向间隙margin-bottom 实现行间距background-color:pink背景直接写在 item 上margin 区域不会被背景填充缝隙直接显现。这是和淘宝方案最大区别省去内层 content。