使用Flexbox实现横向滚动Div时的偏移问题求助

嘿，我来帮你搞定这个问题！你遇到的情况其实是justify-content: space-evenly在搞鬼，咱们一步步来拆解：

问题根源 #

当你给横向滚动的Flex容器设置justify-content: space-evenly时，容器会尝试让所有子元素在可视区域内均匀分布。但一旦子元素总宽度超过容器宽度，这个属性就会强制把整个内容块往容器中间拉，结果就是左侧的元素被挤出容器可视范围，看起来像是向左偏移并被隐藏了。

修复方案 #

最简单的解决办法就是移除justify-content: space-evenly（或者显式设置为justify-content: flex-start，这是Flex布局的默认值）。这样子元素会从容器左侧开始依次排列，超出部分可以正常横向滚动，不会再出现偏移隐藏的情况。

如果你还想保持元素之间的均匀间距，完全不用依赖justify-content——你已经给.item设置了margin: 10px，这个属性本身就能让元素之间保持均匀的间距，完全能满足需求。

修改后的完整代码 #

.scroll{ 
  display: flex; 
  flex-wrap: nowrap; 
  overflow-x: auto; 
  /* 移除了导致偏移的justify-content: space-evenly */
  -webkit-overflow-scrolling: touch; 
  -ms-overflow-style: -ms-autohiding-scrollbar; 
}
.item{ 
  flex: 0 0 auto; 
  background: #e4e4e4; 
  width: 150px; 
  height: 150px; 
  margin: 10px; 
}

<div class="scroll">
  <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 class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

额外小提示 #

如果你的需求是：当内容没超出容器宽度时让元素均匀分布，超出时正常滚动。那可以用媒体查询或者简单的JS来动态切换justify-content属性，但绝大多数横向滚动场景下，直接移除该属性就足够好用啦。

内容的提问来源于stack exchange，提问作者Aravind Reddy