为什么CSS Flex的gap属性没有生效？-css教程-PHP中文网

旧版safari和android webview不支持flex的gap属性，需用@supports双条件检测并配合margin模拟，同时必须设置overflow: hidden、min-width: 0和box-sizing: border-box以避免布局异常。

为什么css flex的gap属性没有生效？

gap在旧版Safari或Android WebView里压根不解析

不是你写错了，是浏览器根本没读到gap这个声明——Safari ≤14.1、iOS Safari ≤14.5、Android WebView ≤76 这些内核对 Flex 的gap属于“完全跳过”，连报错都不会有。DevTools 里它会灰显带删除线，Computed 面板搜gap显示not supported，控制台运行getComputedStyle(el).gap返回空字符串""或"normal"，就是实锤。

@supports (gap: 0) 在 Safari 14.1 是个伪支持陷阱

别信@supports (gap: 0)——Safari 14.1 对它返回true，但只在 Grid 中生效，Flex 容器里的gap、row-gap、column-gap全被静默忽略。

必须用双条件检测绕过：

@supports (grid-row-gap: 0) and (row-gap: 0) {
  .flex-container { gap: 16px; }
}
@supports not ((grid-row-gap: 0) and (row-gap: 0)) {
  .flex-container {
    margin-left: -8px;
    margin-right: -8px;
    overflow: hidden;
  }
  .flex-container > * {
    margin-left: 8px;
    min-width: 0;
    box-sizing: border-box;
  }
}

漏掉overflow: hidden、min-width: 0或box-sizing: border-box中的任意一个，旧 Safari 就可能出滚动条、换行错位或内容截断。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

写了gap但子项还是紧贴着？先排除三个低级错误

父容器没设display: flex（写了inline-flex也行，但不能是block或inline）
gap拼错成gab，或单位缺失（如gap: 12而非gap: 12px）
子项用了display: contents，直接破坏盒模型，gap失去作用对象

flex-wrap换行后首项多出一倍间隙？这是margin方案的自然结果

用margin-left模拟水平gap时，换行后的第一项仍继承该样式，左侧就会多出空白——这不是 bug，是布局流决定的。

解决方式不是清所有首项，而是按每行数量精准清除：

水平布局（flex-direction: row; flex-wrap: wrap），假设每行 3 个：用.flex-container .item:nth-child(3n+1) { margin-left: 0; }
垂直布局（flex-direction: column; flex-wrap: wrap）：用:nth-child(2n+1)清首列

真正容易被忽略的是：min-width: 0几乎从不被主动写，但它能防止子项因内容过长撑破容器；box-sizing: border-box必须显式声明，否则 padding + border 会让尺寸失控。