差距？喘气！

首先，有flexbox（显示器的孩子：Flex容器）。如果您希望它们在视觉上分开，则必须使用内容辩护（即合理性：中间：中间），边距欺骗或有时两者都使用。然后，由于网格差距，网格（显示器：网格容器）的出现（显示器：网格容器），网格可能不会对网格单元之间的最小间隙进行修复。 Flexbox没有空白。

现在，由于Gap的支持不断增加，这是不限于网格的Gap的支持。使用GAP，您可以缝隙网格，挠性箱甚至多个列。这是气候！

网格差距

让我们从缝隙最稳定的地方开始：CSS网格。这是HTML和CSS中的基本网格设置：

 
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>

部分 {
  显示：网格；
  网格板行：重复（2，自动）；
  网格板柱：重复（4，自动）；
  差距：1EM；
}
div {
  宽度：2em;
}

这将网格单元彼此隔开至少1em。根据该职位范围之外的其他条件，分离距离可能大于该距离，但至少应通过1EM分离它们。 （好吧，让我们做一个示例：间隙的间隙是网格单元上的任何边距的补充，因此，如果所有网格项目的边距都有余量：2px;，那么网格单元之间的视觉距离至少为1em加4Px。）默认情况下，默认情况下，缝隙大小的变化是填充网格大小的gap大小，以便填充细胞的大小。

这一切之所以起作用，是因为差距实际上是属性行隙和列间隙的速记。差距：1EM被解释为差距：1EM 1EM，这是行间隙的速记：1EM；列隙：1EM;。如果您想要不同的行和列间隙距离，那么差距：0.5EM 1EM会很好地做到。

带有flexbox的差距

在flexbox上下文中做同样的事情会给您带来空白，但并不像在网格中发生的方式一样。假设与上述相同的HTML，但是CSS相反：

部分 {
  显示：Flex;
  弹性包：包裹；
  差距：1EM；
}

在此处的间隙值至少将挠性箱推开，并且（多亏了Flex-wrap）将其包裹在新的Flex线上时，当它们在弹性容器内部的空间用完时。更改间隙距离可能会导致弹性项目包装的变化，但是与网格不同，弹性项目之间的差距不会改变flex项目的尺寸。差距变化会导致弹性包裹在不同的位置发生，这意味着每行弹性项目的数量将会改变，但是宽度将保持不变（除非您将它们设置为通过Flex生长或缩小，也就是说）。

多列差距

在多列内容的情况下，差距有一些限制：仅使用列间隙。如果需要，您可以声明多列的行差距，但会被忽略。

部分 {
  列：2;
  差距：1EM；
}

支持

对差距，行隙和列隙的支持令人惊讶地广泛。 Mozilla自66版以来的61版，Chromium以来就拥有了它们，这要归功于Igalia的Sergio Villar的工作，他们很快就要来Safari和Mobile Safari（他们已经在技术预览版本中）。因此，如果您的网格，弹性或多柱内容需要更多的呼吸空间，请准备陷入差距！

以上是差距？喘气！的详细内容。更多信息请关注PHP中文网其他相关文章！