Flex布局中gap生效需满足三前提：display为flex/inline-flex、多行时加flex-wrap:wrap、子项不因flex-shrink:0撑满容器；Grid中gap双值顺序为row-gap在前、column-gap在后，且百分比仅column-gap支持。

Flex 布局下图片墙用 gap 必须满足三个前提

只写 gap: 12px 但图片没间距？大概率是容器没跑起来 Flex 布局。它不是“写了就生效”的装饰属性，而是强依赖布局上下文。

• display 必须是 flex 或 inline-flex，block、grid 下写 gap 完全无效
• 多行显示必须加 flex-wrap: wrap，否则 row-gap 不触发（单行无“行间”可言）
• 子项不能设 flex-shrink: 0 且内容过宽——容器被撑满后，间隙空间被压缩为 0，视觉上“消失”

Grid 布局中 gap 的双值顺序别写反

很多人把 gap: 1rem 0.5rem 理解成“列距 1rem、行距 0.5rem”，结果图片墙横向挤成一团。实际规范明确：第一个值是 row-gap，第二个才是 column-gap。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• gap: 8px 16px → 行间距 8px，列间距 16px（不是上下/左右）
• gap: 0 12px → 关闭行间距，只留竖向分隔（适合横向滚动图库）
• 百分比只在 Grid 中对 column-gap 有效，且基于容器内联尺寸（宽度），不是图片尺寸；row-gap 不支持百分比

别混用 gap 和 row-gap/column-gap

同时写 gap: 10px 和 row-gap: 20px 看似“加强行距”，实则引发不对称：后者会覆盖 gap 的行间距部分，但列间距仍保持 10px，导致行列视觉失衡。

• 推荐统一用 gap 简写，语义清晰、不易冲突
• 若需精细控制（比如只调列距），直接用 column-gap: 16px，不碰 gap
• 旧版 Safari（gap，但支持单独的 row-gap/column-gap；现代项目通常无需降级，但得心里有数

gap 不作用于 ，也别往 上写

给

加 column-gap 是常见幻觉——表格不是 Flex/Grid 容器，该属性直接被忽略。同样，gap 是容器属性，写在 选择器里毫无意义。

• 表格列间距请用 border-spacing（配合 border-collapse: separate）
• 图片墙优先用 display: grid + gap，比 flex 更易控行列数量（如 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))）
• 所有图片应清空默认 margin：.gallery img { margin: 0; }，避免和 gap 叠加

真正容易被忽略的是：gap 控制的是轨道之间的固定空隙，它不随内容缩放，也不参与对齐计算。当你发现图片高度不一致导致某行“看起来没间距”，问题往往出在子项未设统一高度或未启用 align-items: stretch，而不是 gap 本身失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！