CSS布局---运用间隙_css gap

前言

   CSS中gap并不是新的属性，在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外，CSS3新特性中弹性布局同样可以使用。由于CSS属性较多，且实际运用比我们看起来更复杂，这让我想同大家分享一下今天的主题---运用间隙。

间隙属性

我们先回顾一下与.css相关的所有CSS属性gap。一共有六个，分别为：

• • gap：定义栅格布局的行与列间隙的尺寸。

• • row-gap：定义行间隙的尺寸。

• • column-gap：定义列间隙的尺寸。

• • grid-gap：定义栅格布局中行与列间隙的尺寸。

• • grid-row-gap：定义栅格布局中行间隙的尺寸。

• • grid-column-gap：定义栅格布局中列间隙的尺寸。

相关grid属性包括：

• • grid-template-rows/columns：规定列和行的尺寸。

• • grid-template-areas：规定使用特定命名的栅格布局。

• • grid-auto-rows/columns：规定列和行的自动尺寸。

• • grid-auto-flow：指定在栅格布局中元素怎样自动布局排列。

上面属性中，我们已经可以忽略前三个属性。这些grid-*属性是在起草CSS Grid规范时早期添加的，后来在gap变得更加普遍时被弃用。浏览器目前仍然支持这些已弃用的grid-*属性，并且将它们前缀视为不存在。因此，grid-gap与gap相同。我们只需要知道row-gap和column-gap是做什么的。

注意：CSS栅格布局起初是用grid-gap属性来定义的，目前逐渐被gap替代。

语法

gap接受一或两个值：

• 单个值将row-gap和设置column-gap为相同的值。

• 当使用两个值时，第一个设置row-gap，第二个设置column-gap。

gap接受以下值：

• <normal>：（默认）浏览器将为多列布局指定使用值 1em，为所有其他布局上下文（即 grid 和 flex）指定使用值 0px。
• <length>：任何有效和非负的 CSS 长度，例如px、em、rem和%等。
• <percentage>：间隙的大小作为相对于元素尺寸的非负百分比值。
• <initial>：应用属性的默认设置，即normal。
• <inherit>：采用父级的间隙值。
• <unset>：gap从元素中移除当前。

间隙属性的百分比

当间隙维度中容器的大小确定时，gap根据任何布局类型中容器内容框的大小解析百分比。

换句话说，当浏览器知道容器的大小时，它可以计算gap。例如，当容器的高度为100px，把gap设置为10%时，浏览器知道间隙为10px。

但是，当浏览器不知道容器大小时，它会想知道，10%是什么？在这种情况下，gap行为会因布局类型而异。

在栅格布局中，布局框解析元素内容时，百分比内在大小解析为零，这就意味着它的空间存在于项目之间，但空间不会影响容器的大小。Demo

在flex布局中，百分比在所有情况下都解析为零，这意味着当浏览器不知道容器的大小时，间隙将不适用。Demo2

间隙属性发展过程

CSS规范模块化缺陷

以前的CSS规范，都是整在一起的。按照版本发展，也就是说，CSS想要发布新版必须所有属性全部通过。这样带来的问题是，CSS规范非常难产，只要有一个属性争议，就无法达成一致，那么这个版本的CSS规范就无法发布。这也是为什么CSS2 --- CSS3中间经历了差不多有十年的时间。

于是后来，CSS3规范之后，就开始做了调整，新的CSS特性再也不按照一个大的版本进行迭代，而是按照一个一个具体的模块进行制定。

于是大家可以发现，在很短的时间内，各种各样的CSS新特性都出现了。浏览器支持这些特性，不需要等待一个完整的发版过程，只需要浏览器厂商觉得这个模块里这个东西很合适，那就去支持它，哪怕它现在还不稳定，还在实验阶段。典型的案例就是：env()环境变量，以及黑暗模式的媒体特性支持@media (prefers-color-scheme: dark)。

这样一个CSS规范策略确实繁荣了CSS，但是也带了模块化缺陷。就是由于各个模块独立发展，导致原本很多类似的属性并没有大统一，带来了无谓的学习成本。典型的例子就是对齐属性：

Flex布局中的对齐和Grid对齐明明属性和作用是一样的，但是属性值却不一样。比如，Flex布局中justify-content属性支持的是flex-start和flex-end（交叉轴上对齐属性），不支持start和end；Grid布局中justify-content属性支持start和end，同时也支持flex-start和flex-end。就是因为Flex布局模块和Grid布局模块是两个独立的CSS模块。

间隙属性从单个模块属性走向整个CSS

其实一开始的时候是没有gap属性的。最开始出现的类似的属性是在栅格布局中，那个时候叫做grid-gap，是CSS grid-row-gap和grid-column-gap属性的缩写。CSS中column-gap属性是第一个间隙属性，在Grid布局那边，由于一开始过分看重独立性，模块化。于是，出现了grid-column-gap属性。没过多久，意识到grid-column-gap和column-gap对于开发者的学习而言不友好。

很快，grid-gap属性从Grid规范中去除了。虽然Grid布局依旧支持grid-gap属性，gap、row-gap和column-gap这才是新的标准。

同时，Multi-column、Flex布局中各个间隙也可以使用gap属性。

间隙属性进化史回顾

1. Multi-column布局首先支持了column-gap属性。

1. Grid布局规范模块独立发展，出现了grid布局独有的间隙属性grid-gap，grid-row-gap和grid-column-gap。

1. 站在CSS整体视角，CSS间隙属性出现了内耗。于是，规范调整，保留行列间隙的概念。但是CSS属性向已经存在的column-gap属性靠拢。于是，gap，row-gap和column-gap属性诞生，成为CSS中统一的间隙属性。

1. Multi-column布局也额外支持了gap和row-gap属性，只是多栏布局没有行间隙概念，因此row-gap属性并无渲染效果。

1. Flex布局也采用间隙的概念，支持了统一的gap属性。

什么地方可以使用间隙？

栅格布局中常常使用间隙，在Flexbox以及多列布局中同样可以使用。让我们来分别看看下面案例。

栅格间隙

所有浏览器都支持栅格布局中的间隙。

我们来创建一个包含三列两行的栅格：

.container {

display: grid;

grid-template-columns: 200px 100px 300px;

grid-template-rows: 100px 100px;

}

打开调试器可以看到的线条为栅格线，它们分隔栅格的轨道（行和列）。这些线实际上并不存在于栅格中，不可见的，没有粗细。

我们继续向栅格添加间隙，这些栅格线开始像获得厚度一样。

gap: 20px;

设置栅格线尺寸后，栅格尺寸也随之扩大。

弹性盒间隙

我们再看看Flexbox布局中的差异，相对栅格布局相对会复杂一些。

.container {

display: flex;

column-gap: 10px;

}

再让flex-direction切换column，从上到下垂直堆叠。

flex-direction: column;

这时候间隙消失了，当容器在row方向时，即使存在column-gap，它也不在column方向上渲染。这时我们用row-gap试试，也可以直接使用gap。

gap: 10px;

可以得知，colum-gap总是垂直工作的，row-gap总是水平工作的，不依赖于容器flex方向。

直接改变块的宽度，并不能自动换行，我们设置flex-wrap属性可以规定Flexbox是单行还是多行，同时横轴的方向决定了新行堆叠的方向。

flex-wrap: wrap;

注意：如果元素不是Flexbox对象的元素，则flex-warp属性不起作用。

Flexbox和栅格布局之间有一个小区别，就是列间隙不一定跨柔性线对齐。我们用水平居中，将容器居中放置在它们的弹性线中。这样，我们可以看到每条弹性线都是一个单独的布局，其中间隙是独立于其他线应用。

justify-content: center;

多列间隙

多列是一种布局，可以很容易地在多列之间自动流动内容，就像传统报纸文章中那样。

多列布局中的间隙与栅格或Flexbox的工作方式不同。存在下面三个显著差异：

1. 1. row-gap没有效果
   2. column-gap有一个非0默认值
   3. 并且可以设置间隙的样式

让我们分别说说。首先，row-gap没有影响。在多列布局中，没有任何要分隔的行，意味着只与column-gap相关。

其次，与grid和Flexbox不同的是column-gap，在1em多列布局中具有默认值（而不是0）。因此，即使根本没有指定间隙，内容列仍然在视觉上分开。默认间隙是可以被覆盖的，这个默认设置还是很不错的。

.container {

column-count: 3;

column-gap: 12px;

column-rule: 4px dotted red;

padding: 12px;

}

其中，column-rule属性指定列之间的规则，包括：宽度、样式、颜色。

上面dotted是来源于border-style边框样式属性，作用为定义点状边框。

浏览器支持

gap得到了全面的支持，我们看下caniuse。"gap" | Can I use... Support tables for HTML5, CSS3, etc

总结一下：

1. 1. 1. Flexbox：gap除了Internet Explorer（即将淘汰）、Opera Mini 和 Android UC浏览器之外的所有地方都支持。全球支持率为87.31%
      2. Grid：具有全球93.79%支持率
      3. 多列：同上但在Safari中不支持，具备75.59%的全球支持率

总体而言，gap属性得到了很好的支持，并且在大多数情况下，不需要考虑兼容性解决办法。

设计flex和grid的间隙

实现gap样式设计是非常有用的。大体设计思路是：给栅格容器一个背景颜色，然后给项目一个不同的颜色，最后设置间隙来显示容器的颜色。

边距与间隙视觉空间

间隙在容器级别定义的，这意味着我们为整个布局定义一次它们，能够在容器中一致地应用。使用边距需要对每个项目进行声明。当项目性质不同或来自不同的可重用组件时，这会变得复杂。

最重要的是，默认情况下，gap只需要一行代码就可以做正确的事情。例如：我们在弹性布局中对项目之间而不是周围引入一些空间。边距则不同了，如下。

margin: 0 20px;

gap: 40px;

margin: 20px;

gap: 40px;

空白空间

间隙与边距并没有排他性，可以很好地协同工作，可以将一个项目的布局分散得很远。gap属性只是布局容器中框之间创建的空白空间的一部分。margin，padding，和alignment all可能会增加gap已定义内容之上的空白空间。

让我们考虑一个例子，我们构建一个简单的flex布局，具有给定的宽度、一些间隙、一些内容分布（使用justify-content）以及一些边距和填充。

.container {

display: flex;

gap: 40px;

width: 900px;

justify-content: space-around;

}

.item {

padding: 20px;

margin: 0 20px;

}

上图可见，两个连续的弹性项目之间有四种不同类型的空白空间：

1. 1. 1. 两个连续项目之间的间隙定义了项目之间的最小间距。
      2. margin将项目推得更远，与gap不同的是，它增加了所有项目两侧的空间。
      3. padding为每个项目提供了一些空间。
      4. 如果有剩余空间，内容分发根据space-around（在左右两侧会留下边距，对比space-between）值在flex line内均匀分发项目。

调试间隙

对于间隙，我们有两个比较常见的调试方法。

间隙是否有效

除非我们拼写错误gap或者提供了无效值，否则该属性将始终应用于页面。

.xxx {

display: block;

gap: 3em;

}

它不会做任何事情，但它是有效的CSS，浏览器不介意gap不适用于块布局。然而，Firefox有一个名为Inactive CSS的功能，它可以做到检查有效CSS。

间隙尺寸调试

在浏览器的调试工具中操作。

补充内容：CSS3 Grid

CSS3的一个强大功能：Grid。以往CSS框架中的grid布局一般是通过float和百分比宽度实现的，这种实现有几种缺点：

1. 1. 代码不够简洁
   2. 需要清除浮动以避免高度塌陷
   3. 列的个数是固定的，不能灵活定义

当然grid也可以利用flex实现，但是并不会比用float简单多少，而且flex擅长的是一维空间布局，而对grid这种二维空间并不擅长。

Grid作为一个二维的栅格系统，由若干列（column）和行（row）构成。实际运用例如：

1. 1. 花瓣式布局
   2. 响应式布局