gap在flex中不生效，先确认三件事：一是浏览器是否支持（ios safari 14.5+、chrome 89+、firefox 63+），二是父容器是否为display: flex（非inline-flex），三是子项是否实际换行（flex-wrap: wrap需触发）。
gap在Flex中不生效，先确认这三件事
写了gap: 16px但卡片还是紧贴着？不是代码写错了，而是环境没搭对。iOS Safari 14.5+、Chrome 89+、Firefox 63+才原生支持gap在flex容器上生效，老版本直接忽略该声明。
- 父容器必须是
display: flex（不是inline-flex，除非你明确需要内联行为） - 子项必须实际换行——如果所有卡片加起来宽度没超容器，
flex-wrap: wrap不会触发，row-gap也就没机会起作用 - 别在IE或Android 4.x WebView里指望
gap，得回退到margin方案
移动端卡片列表用gap替代margin的实操要点
gap天然只作用于项目之间，不碰容器边缘，换行时也不会在最后一行右边残留空白——这点比margin-right可靠得多。
- 横向间距统一用
gap: 12px，纵向单独控制更安全：row-gap: 24px - 卡片带
box-shadow时，gap能避免阴影重叠，margin容易造成视觉粘连 - 单位优先用
rem（如gap: 1rem），避免缩放失准；vw适合全屏布局但需警惕小屏下过小 - 响应式微调建议：
@media (max-width: 768px) { .card-list { gap: 8px; } }
column-gap在Flex里根本不起作用
写column-gap: 16px却没看到效果？不是浏览器bug，而是属性压根不被识别。它只在CSS多列布局（columns、column-count）中生效，Flex容器里设它等于白写。
-
.card-list { display: flex; column-gap: 16px; }→ DevTools里会标灰，显示“not applicable” - 别和
gap: 12px混用：column-gap在Flex中纯属冗余，删掉省心 - 有人误以为它能用，常因PostCSS插件（如
postcss-gap-properties）偷偷把column-gap转成了gap，造成“好像生效”的假象
兼容老浏览器的回退方案怎么写才不踩坑
要支持iOS Safari ≤14.1或Android旧WebView，不能只靠@supports (gap: 0)包裹——它在部分老Safari里也返回true但实际不生效。
- 稳妥做法：先写
gap: 12px，再用@supports not (gap: 0) { ... }降级 - 回退用
margin时，避免:last-child——Flex换行后它失效；改用相邻兄弟选择器：.item + .item { margin-left: 12px; } - 若卡片垂直排列，用
margin-bottom配合父容器负边距：margin-bottom: -12px抵消末尾多余空隙
row-gap照常生效，但align-content会因每行基线不同显得错位——这时别硬调align-content，先统一子项高度或改用grid。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
