CSS 布局中的各种“间距”

欢迎关注我的公众号：前端侦探

介绍CSS布局中一些设置间隔的小技巧（纯经验，没有新特性）。

一、水平列表

首先是这种，居中的两个按钮，假设间隔是20px（下同）

这种可以设置一半的margin就行了

css 复制代码

.item {
  margin: 0 10px; /*一半的间隔*/
}

或者只给第二个元素设置左偏移，也就是除去第一个元素都设置左偏移（推荐✅）

css 复制代码

.item+.item{ /*相邻元素的下一个，也就是第二个以后得所有元素*/
  margin-left: 20px;
}
/*或者*/
.item:not(:first-child) {
  margin-left: 20px;
}

然后是这种场景，撑满整行宽度的元素

如果设置左右margin，那么父级容器左右padding需要减少一半

css 复制代码

.wrap {
  display: flex;
  padding: 20px 10px;
}
.item {
  margin: 0 10px;
  flex:1;
}

当然，如果是只给除去第一个元素都设置左偏移就无需设置父容器了

除了这种方式，grid布局也是很好的选择

css 复制代码

.wrap {
  display： grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

注意，这里用的是grid-gap，这是一个早期随grid出现的属性，兼容性已经非常好了

移动端几乎可以放心使用。

现在flex布局也支持gap属性了，不过兼容性差点，酌情使用

二、纵向列表

然后是这种列表结构

如果是普通布局，其实可以直接用margin实现，无需设置一半的偏移，反而更方便

css 复制代码

.item {
  margin: 20px;
}

因为margin在垂直方向上会"自动合并"，哪个大取哪个（现在应该没多少人知道了吧😂）

如果是flex布局，就没有合并的问题了，可以用排除第一个元素的方法，如下

css 复制代码

.list {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.item+.item{ /*相邻元素的下一个，也就是第二个以后得所有元素*/
  margin-top: 20px;
}
/*或者*/
.item:not(:first-child) {
  margin-top: 20px;
}

最简单的还是grid布局，使用grid-gap也不错（我目前几乎都是用这种方式了，推荐✅）

默认就是垂直方向，代码量最少，结构最清晰

css 复制代码

.list {
  display: grid;
  grid-gap: 20px;
  padding: 20px;
}

三、网格布局

网格布局就推荐直接用 grid 布局了

和上面的实现基本一致

css 复制代码

.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

其实，在grid出现之前，我们一般都是通过margin来实现，但是这种在不确定一排有多少个的情况下，就无法针对某些元素去取消它的margin了，我们可以给每个元素设置右、下两个方向上的margin

css 复制代码

.item {
  margin: 0 20px 20px 0;
}

这样的话，右边和下边肯定会多出来20px

没关系，我们可以给父级的右、下padding都取消掉

css 复制代码

.list {
  padding: 20px 0 0 20px;
}

还有一种方式，嵌套一层父级

html 复制代码

<div class="list">
  <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

然后给inner设置一个负的margin，这样也能把右下的多余margin抵消掉

css 复制代码

.inner{
  margin: 0 -20px -20px 0;
}

这样就可以了，虽然有点 hack，但是也能实现

四、多行标签列表

还有一种布局，像这种不定宽度的标签，如下

这种如果不考虑兼容性的话，flex的grid是最好选择

css 复制代码

.list{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

但是，如果考虑兼容性的话，那就只能用margin实现，和上面一样，设置右、下两个方向的margin

css 复制代码

.item{
  margin: 0 20px 20px 0;
}

这样的话，右侧也会出现一个多余的margin，可能会导致某些本来可以放在上一行的被挤到了下一行

最好的实现就是嵌套一层，然后给这层标签设置负的margin，如下

css 复制代码

.inner{
  margin: 0 -20px -20px 0;
}

就这些了，如果你也碰到这些间距，可以尝试一下这些方法。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发 ❤❤❤