safari 14.1–15.6 中 flex 的 gap 必须配合 flex-wrap: wrap 才生效，否则被忽略；双值语法为 row-gap column-gap；gap 与 margin 叠加不抵消；多列布局子项宽度需用 calc() 扣除 gap。
Flex容器必须声明flex-wrap: wrap才能让gap生效
在 Safari 14.1–15.6 中，仅写 display: flex; gap: 12px; 是无效的——DevTools 的 Computed 面板里 gap 显示为 0px 或空值，不是漏单位，是浏览器压根没解析。根本原因是这些旧版 Safari 要求 Flex 容器显式声明 flex-wrap: wrap 才启用 gap 解析逻辑。
即使你视觉上只要单行布局，也得加这一句。Chrome/Firefox 在 flex-wrap: nowrap 下支持 gap，但统一写 flex-wrap: wrap 是最省心的跨浏览器方案。
- 不想真换行？给子项加
min-width: 0或用flex: 0 0 calc(33.333% - 8px)配合justify-content: center - 检查是否生效：打开 DevTools → Computed → 搜索
gap，若值为空或为normal，基本就是flex-wrap缺失
gap 双值写法是 row-gap column-gap，和 flex-direction 无关
gap: 8px 12px 始终表示第一值是 row-gap（垂直方向间距），第二值是 column-gap（水平方向间距）。它不按“上下/左右”理解，而是严格由 Flex 轴向决定：
- 横向主轴（
flex-direction: row）：row-gap控制行间（即垂直方向）间距，column-gap控制元素间（即水平方向）间距 - 纵向主轴（
flex-direction: column）：row-gap仍控制垂直方向间距（此时就是“列间”垂直距离），column-gap仍控制水平方向间距 -
gap: 8px 0不是“禁用列间距”，而是真把列间距设成0px，子项会紧贴——要关就删掉或单独写column-gap: 0
gap 和 margin 同时存在，空白会叠加
gap 是容器级属性，margin 是子项自身属性，二者不抵消、不覆盖，只相加：
- 容器设
gap: 10px，某个子项又写margin-right: 10px→ 右侧实际空出20px - 用
justify-content: center时，给第一个子项加margin-left会让整行左偏，居中失效 - 卡片列表中个别卡片加了
margin-bottom强调，结果和gap叠加，底部多出一倍空白 - 真要差异化留白，优先改子项
margin，并同步把对应方向的gap设为0
多列布局中子项宽度必须扣除 gap 占用空间
设了 gap: 16px 但子项还是挤成两行？大概率是子项宽度没动态扣除间隙。例如三列布局，每个子项写 flex: 0 0 33%，加上两处 16px 间隙，总宽 = 3 × 33% + 2 × 16px > 100%，浏览器只能换行或压缩。
- 正确做法：用
calc()动态减去间隙，如flex: 0 0 calc((100% / 3) - 16px)（注意这里减的是完整16px，不是一半） - 更通用写法：
flex: 0 0 calc((100% - 2 * 16px) / 3)（3 列有 2 处间隙） - 如果子项用了
flex: 1或flex-grow，则无需手动算calc，但需确保min-width足够防止过度压缩
真正容易被忽略的是：gap 本身不改变子项的盒模型尺寸，也不参与任何宽度计算——它只是在渲染阶段插入空白，所以所有涉及宽度的手动计算都必须显式扣减。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
