项目之间的弹性边距 - CSS

当我们需要在一个列表或导航栏中，为每一项之间添加一定的间距，且这个间距会随着浏览器窗口大小的改变而自适应时，我们可以使用CSS的flex布局中的gap属性，或者使用margin属性来为每个项目添加弹性边距。

使用gap属性

gap属性可以在flex容器中为项目之间添加空白间隔。

Markdown代码：

<!-- HTML代码 -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* CSS代码 */
.container {
  display: flex;
  gap: 20px;
}
.item {
  background-color: #ccc;
  padding: 10px;
}

效果预览：

使用margin属性

另一种常用的方法是在每个项目上使用margin属性。

Markdown代码：

<!-- HTML代码 -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* CSS代码 */
.container {
  display: flex;
}
.item {
  background-color: #ccc;
  padding: 10px;
  margin-right: 20px;
}
.item:last-child {
  margin-right: 0;
}

效果预览：

两种方法各有优缺点，gap属性在实现上更加简单，且更加符合逻辑，减少了元素边距的计算，但是gap属性支持的浏览器并不是所有都兼容，而margin属性则相对更加通用，但是边距的计算会稍显麻烦。

总之，选择使用哪种方式，可以根据具体需求和浏览器兼容性做出选择。