为什么CSS Flex布局中设置的gap属性被忽略不生效？

核心原因 #

Safari 14.0.x版本本身不支持Flex布局的gap属性：该版本仅对Grid布局开放了gap支持，Flex布局的gap特性直到Safari 14.1版本才正式适配，所以你设置的gap: 4rem会被浏览器直接忽略。
另外你提供的代码存在一处笔误：第二个.card容器的最右侧div闭合标签写成了</di>，修正为</div>即可避免无关的渲染异常。

兼容方案 #

方案1：用margin替代gap（全版本兼容） #

删除原gap设置，通过子元素边距实现相同间距效果，避免边缘出现多余边距：

.card {
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
  margin-top: 2rem;
  display: flex;
  align-items: flex-start;
}
/* 仅给非第一个子元素添加左侧间距 */
.card > div:not(:first-of-type) {
  margin-left: 4rem;
}

方案2：保留gap写法的兼容降级 #

可以同时保留gap和margin规则，高版本浏览器优先使用gap，旧版本自动降级用margin实现间距：

.card {
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
  margin-top: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 4rem;
}
.card > div:not(:first-of-type) {
  margin-left: 4rem;
}
@supports (gap: 4rem) {
  /* 浏览器支持gap时清空冗余的margin，避免间距叠加 */
  .card > div:not(:first-of-type) {
    margin-left: 0;
  }
}

内容的提问来源于stack exchange，提问作者user3574603