水平滚动的 flex-row 容器末尾的纯 CSS 边距 [重复]答案

【问题标题】：CSS-only margin at the end of a horizontally scrolling flex-row container [duplicate]水平滚动的 flex-row 容器末尾的纯 CSS 边距 [重复]
【发布时间】：2020-05-20 06:17:40
【问题描述】：

我想构建一个水平滚动条，在每个项目之间都有边距，并且滚动条的末尾和开头的边距相同。然而，不知何故，容器末端的边缘被什么东西吃掉了。

有没有办法在不插入“间隔”元素的情况下在末尾有边距？

.scroller {
  display: flex;
  overflow-x: auto;
  
  width: 300px;
}

.item {
  flex: none;
  border: 1px solid red;
  
  width: 100px;
  height: 50px;
  
  margin-right: 20px;
}

.item:first-child {
  margin-left: 20px;
}

<div class="scroller">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【问题讨论】：

使用伪元素作为间隔元素（相关：stackoverflow.com/q/60048710/8620333 用于垂直问题）
是的。我已经想到了，不幸的是，我的滚动元素是 flex-cols 并且 after 元素弄乱了它们的布局......
所以更好地分享您的真实用例以获得准确的答案

标签： html css scroll flexbox

【解决方案1】：

这样的？

.scroller {
  white-space: nowrap;
  overflow-x: scroll;
  width: 300px;
}

.item {
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  height: 50px;
  margin-right: 20px;
}

.item:first-child {
  margin-left: 20px;
}

<div class="scroller">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：

我不认为删除 flex 是一种选择
我的问题可能并不暗示它，但我不依赖于滚动容器中的 flex ......我会接受这是正确的
如果子元素
在项目 div 内有文本并使用 white-space: nowrap，它只会有很长的文本行

【解决方案2】：

是的，您可以在不使用伪元素作为分隔符的情况下解决此问题。

您只需要一个容器元素：

.container {
  width: 300px;
  overflow-x: auto;
}

.scroller {
  display: inline-flex;
}

.item {
  border: 1px solid red;
  width: 100px;
  height: 50px;
  margin-right: 20px;
}

.item:first-child {
  margin-left: 20px;
}

<div class="container">
  <div class="scroller">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

【讨论】：