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

Question

我有一个弹性框，我想确保每个项目之间都有最小的间隙。我找到了gap属性，但是当我在MDN上查找该属性时，它说除Firefox之外的所有浏览器都不支持该属性。

它在Firefox中有效，但在Chrome中似乎不起作用。

是否有另一个 CSS 属性可用于其他浏览器，或者我应该坚持使用边距右边距？我可以同时使用两者吗？

#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>

更新：
在每个项目上使用边距并在最后一项上删除它似乎有效。

/* 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

Answer 1

我认为这篇 StackOverflow 帖子的最佳答案可能会对您有所帮助： 设置弹性框项目之间距离的更好方法 :)

TL;大卫："最干净"的方法是在容器上设置padding: 5px，在孩子身上设置margin: 5px。这将在每个孩子之间以及每个孩子与其父母之间产生 10px 的差距。

Answer 2

根据caniuse的说法，CSS网格间隙以及其他网格属性得到了较新的浏览器的良好支持，只有少数例外

全球支持 91.89%

https://caniuse.com/#feat=css-grid

Answer 3

似乎除了Firefox之外的任何浏览器都不支持它。

使用向组项添加右边距(最后一个项除外(的样式声明似乎有效。

CSS：

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

将 itemGap 类添加到弹性框组。

正如 @michael-b 所建议的那样，这也有效：

.itemGap > div + div {
margin-left: 25px;
}

#Group {
width: 349px;
height: 14px;
left: 0;
top: 0px;
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: 82%;
	}
	37.5% {
		width: 82%;
	}
	50% {
		width: 50%;
	}
	87.5% {
		width: 50%;
	}
	100% {
		width: 82%;
	}
}
/* add margin to group to apply to group items */
.itemGap > * {
margin-right: 20px;
}
/* add margin to group to apply to group items */
.itemGap > *:last-child {
margin-right: 0;
}
/* add outline around group */
.outline {
outline: 1px dashed rgba(0,0,0,.35);
}
body { 
font-family: Arial, sans-serif; 
font-size: 11px;
}

<div id="Group" class="outline 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>

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