html - gap 属性显示它在 MDN 上不受支持。使用安全吗？-6ren

html - gap 属性显示它在 MDN 上不受支持。使用安全吗？

转载作者：行者123 更新时间：2023-11-28 09:15:24

24

4

<分区>

我有一个 flex 盒子，我想确保每个元素之间的间隙最小。我找到了 gap属性，但是当我在 MDN 上查找该属性时，它说它在除 Firefox 之外的所有浏览器中不受支持。

它在 Firefox 中有效，但在 Chrome 中似乎无效。

是否有其他 CSS 属性可以用于其他浏览器，或者我应该坚持使用 margin-right？我可以同时使用两者吗？

#GroupGap {
    position: absolute;
    width: 349px;
    height: 14px;
    left: 0;
    top: 80px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 25px; /* test */
    grid-gap: 50px; /* test */
}

#Group {
    position: absolute;
    width: 349px;
    height: 14px;
    left: 0;
    top: 30px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: visible;
}

/* add animation to class  */
.group {
	animation: resize 2500ms linear 0s infinite;
}

/* size width transition */
@keyframes resize {
	0% {
		width: 72%;
	}
	37.5% {
		width: 72%;
	}
	50% {
		width: 50%;
	}
	87.5% {
		width: 50%;
	}
	100% {
		width: 72%;
	}
}

/* add margin to group to apply to group items */
.itemGap > * {
    margin-right: 25px;
}

/* add margin to group to apply to group items */
.itemGap > *:last-child {
    margin-right: 0;
}

/* add outline around group */
.menu {
   outline: 1px dashed rgba(0,0,0,.35);
}
#label1 {
    position: absolute;
    left: 0;
    top: 60px;
}
body { 
  font-family: Arial, sans-serif; 
  font-size: 11px;
}

<div>Group items with margin right:</div>
<div id="Group" class="menu group itemGap">
		<div>
			<span>Home</span>
		</div>
		<div>
			<span>Products</span>
		</div>
		<div>
			<span>Products</span>
		</div>
		<div>
			<span>Services</span>
		</div>
		<div>
			<span>About</span>
		</div>
		<div>
			<span>Contact</span>
		</div>
	</div>
  
 <div id="label1">Group with gap and grid gap:</div>
 
  <div id="GroupGap" class="menu group">
		<div>
			<span>Home</span>
		</div>
		<div>
			<span>Products</span>
		</div>
		<div>
			<span>Products</span>
		</div>
		<div>
			<span>Services</span>
		</div>
		<div>
			<span>About</span>
		</div>
		<div>
			<span>About</span>
		</div>
		<div>
			<span>About</span>
		</div>
		<div>
			<span>Contact</span>
		</div>
	</div>

更新:
在每个元素上使用 margin right 并在最后一个元素上删除它似乎有效。

/* add a right margin on each item */
.itemGap > * {
    margin-right: 25px;
}

/* remove right margin on last item */
.itemGap > *:last-child {
    margin-right: 0;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child https://developer.mozilla.org/en-US/docs/Web/CSS/gap

24

4

0

文章推荐： javascript - 禁用 Javascript 的浏览器的模态备份

文章推荐： html - 为什么我的图标在 Font Awesome 上显示方 block ？

文章推荐： javascript - jquery大图缩略图问题

文章推荐： xcode - 变量 + insertText Swift deleteBackward() + insertText (". ")

mysql - Processmaker 安装 MySQL 支持 : undefined , GD 支持 : not enabled , LDAP 支持 (*):未启用
我的 processmaker 安装遇到了一些问题。我正在尝试使用本指南 [url]http://wiki.processmaker.com/index.php/ProcessMaker_Ubuntu
ios - 验证 iMessage 支持、SMS 支持
我正在使用 ShareKit。发送 SMS 消息使用 MFMessageComposeViewController，用户看到标题“文本”。我想将该标题更改为更能反射(reflect)实际可用内容的内容
android - ActionBar(支持)和 Fragment(支持)
我需要在我的一个针对 Gingerbread 的 Android 应用程序中使用操作栏和 fragment 的组合。所以我使用了 v7 支持库中的操作栏和 v4 支持库中的 fragment ，并使用
javascript - 为什么 Web Workers 中有同步 FileSystem 支持，但没有同步 WebSocket 支持？
我明白为什么浏览器 vendor 不想帮助我阻止他们的 UI 线程。但是，我不明白为什么会有: Web Workers 中没有 sleep (2) 没有同步 WebSockets API 有一个syn
hadoop - Cloudera 支持 docker 容器或 Docker 支持 CM 5 图像
最近我的组织正在考虑使用 Docker。我们组使用的是cloudera CDH 5.1.2。 1) cloudera 是否与 Docker 容器兼容？2) docker 和cloudera 组合是否存
macos - 如何在 Mac 上完整(具有所有功能 - ACL 支持/Xattr 支持/xxhash 库/zstd 库)安装(编译)rsync v3.2.3？
我正在尝试通过编译在 Mac 上安装 rsync 3.2.3。但是，我想安装所有功能。为此，它需要一些库，此处 ( https://download.samba.org/pub/rsync/INSTA
pydev 支持 nose2
我一直在使用 PyDev 成功运行 nose 测试，并想试试 nose2。所以我安装了它 pip install nose2 复制/粘贴来自 http://nose2.info/ 的示例代码进入名为
LLVM OpenMP 支持
我想知道 LLVM 中是否有任何函数/方法可以在 LLVM IR 中添加 Open-MP 构造。 llvm-3.0 是否仍然支持 OpenMP 指令？最佳答案 OpenMP 是一种高级语言扩展。因此
支持 CUDA 的设备
我对 CUDA 编程非常陌生。我正在浏览 SDK 附带的示例。我能够编译代码，但是当我运行它时，出现以下错误: "clock.cu(177) : CUDA Runtime API error 38:
RStudio HiDPI 支持
RStudio 是用于 R 开发的出色 IDE。我想知道是否有任何方法可以很好地支持 HiDPI 分辨率？我目前有 13 英寸显示器和 3200x1800 分辨率，甚至很难阅读 RStudio 选项
Django RDF 支持？
我正在寻找一种有助于为 Django 项目提供 RDF 支持的工具。到目前为止，我发现了两个: django-rdf - 最后一次修改是在 4 年前，所以它看起来像是一个死项目。 djubby -
支持 Javascript 链接的关系运算符吗？
我刚刚尝试了一些 JS 核心原则，发现引擎评估链接的关系运算符而不会引发错误。相反，他们以我自己无法理解的方式进行评估。 console.log(1 4 > 3 > 2 > 1); //false,
支持 textmate 片段的编辑器？
我知道 etexteditor 和 vim/emacs。是否有任何其他 Windows 编辑器支持类似 textmate 的片段(例如，您编写触发词，按 Tab，它更改为某些内容，再次按 Tab，它
kubernetes - 如何验证集群网络策略配置/支持
我正在尝试找出验证给定集群的网络策略配置的最佳方法。 According to the documentation Network policies are implemented by the ne
boost MD5 支持？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
z3 - 支持 AUFBV？
Z3 会支持 AUFBV 吗？对于以下脚本: (set-logic AUFBV) (declare-fun x () (_ BitVec 16)) (declare-const t (Array (
c# - 支持/反对使用部分类进行测试的原因？
使用分部类编写 NUnit 测试的优缺点是什么？我要开始了: 亲:可以测试私有(private)方法缺点:TDD 不再可能了还有什么？最佳答案缺点:要么您必须测试与您发布的版本不同的构建，要
Javascript AOP 支持
它很容易(对于 90% 的 aop 特性)在没有任何语言本身支持的情况下做到这一点，就像大多数动态语言如 python 和 ruby 一样。然而，Dojo在 1.3.2 上直接支持它.最新版本发生
Android:测试字符是否可显示/支持？
我在我的 android 应用程序中使用亚洲字符，我已经了解到某些字符无法显示，因为系统字体不支持它们。我查询了一个包含亚洲字符的数据库，并且经常检索到无法显示的标志。这些情况对我的应用程序来说通常不
ios - 支持@的UITextView没有空格来放置用户名
你好，我想实现一个控件，我想在用户键入@字符时启用该控件，直到未填充运行文本中的空格为止，它应该显示用户列表，@符号后键入的文本应该显示基于键盘字符的建议，就像我们在上面看到的那样Twitter 或

首页

博学

6Ren·AI

商城

html - gap 属性显示它在 MDN 上不受支持。使用安全吗？