gap 属性表明它在 MDN 上不受支持。使用安全吗？ [复制]

Posted 2023-03-06

【中文标题】gap 属性表明它在 MDN 上不受支持。使用安全吗？ [复制]

【英文标题】：The gap property shows it's unsupported on MDN. Is it safe to use? [duplicate]

【发布时间】：2020-03-25 19:39:27

【问题描述】：

我有一个弹性盒子，我想确保每个项目之间都有一个最小间隙。我找到了 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>

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

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

【问题讨论】：

您必须使用CSS 前缀来支持浏览器。当父级设置display 属性flex 或grid 时，grid-gap 或gap 也将使用不同的方式。当父级display 属性flex 然后grid-gap 或gap 属性将与父元素一起使用，当display 属性grid 然后grid-gap 或gap 属性将与子元素一起使用。

它仍处于试验阶段。不要将其用于生产站点。

这个问题是“2019 年末是否支持 gap 属性，如果不支持，则为安全替代方案。”链接的问题是关于如何在弹性框或网格项目之间添加间隙。

【参考方案1】：

我认为这篇 *** 帖子的最佳答案可能会对您有所帮助：Better way to set distance between flexbox items :)

TL;DR：“最干净”的方法是在容器上设置padding: 5px，在子级上设置margin: 5px。这将在每个孩子之间以及每个孩子与其父母之间产生 10 像素的间隙。

【讨论】：

谢谢。我在过去的某个时候发现了这一点，因为我支持了一些答案。很多答案是用于包装网格项目或切换到网格。我正在寻找仅使用 Flexbox 并在不支持 gap 的情况下进行后备。

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

@JasonAller 感谢您的反馈。我实际上考虑过，但没有复制它的原因是它的答案很长，我不想翻页。这个页面还是新的，所以我对我发布的内容很小心，但我会立即编辑它。 :)

【参考方案2】：

根据 caniuse CSS grid-gap，以及其他网格属性，新浏览器都很好地支持，只有少数例外

全球支持 91.89%

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

【讨论】：

设置 grid-gap 似乎对我没有任何作用（参见示例）。我现在一直在使用 flexbox。

如果你想以“良好支持”的方式使用 gap，那么你需要使用 grid.如果您无法离开 flexbox 显示，那么最好依赖诸如边距之类的属性，或者尝试使用伪元素。

谢谢。当可以切换到网格时，我很高兴知道我将能够可靠地使用它。

【参考方案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

【讨论】：

您可以只使用一行代码来简化您的 CSS：.itemGap > div + div margin-left: 25px 。