css 弹性间隙仅在子项左侧添加空间？

stszievb 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(106)

我正在做一个类别选择部分，这是应该溢出的小视口和滚动。
但由于某种原因，当我添加弹性间隙时，它只会在孩子的左侧增加空间。
https://codepen.io/DanNisenson/pen/xxzYYpq
`

.sections {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 700;
}

`
目前我已经删除差距属性，并为子对象设置了左右填充。有人能告诉我我遗漏了什么吗？

2条答案

gap属性只用于设置flex容器子元素之间的间距。在您的示例中，您有一个不可见的sections-scroll-shadow div，它使它与第一个可见元素之间差距成为可能。
这里没有什么问题，您可以在节的末尾添加一个空元素，或者更好：在父容器上设置填充。

你在这一部分的开头添加了一个空的div。我想这是由于这个div的存在，你会觉得差距是向左的。但实际上这个间隙是在这些div之间

<div class="sections-scroll-shadow"></div>