使用 flexbox 水平滚动 div 的问题答案

【问题标题】：issue with horizontal scrolling div using flexbox使用 flexbox 水平滚动 div 的问题
【发布时间】：2018-06-18 10:34:26
【问题描述】：

我正在使用 flexbox css 来制作一个包含多个 div 的容器以水平滚动，但问题是当我尝试向容器添加更多 div 时，它会移动到左侧并且 div左边的显示被隐藏了。

我不明白发生了什么这里是代码 sn-p 和 codepen

.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>

谢谢你

【问题讨论】：

标签： html css flexbox horizontal-scrolling

【解决方案1】：

从.scroll 中删除justify-content: space-evenly;。

演示：

.scroll{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -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 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 都以这种方式连续显示。

【讨论】：

我按照我的要求保留了justify-contet，只是你不能简单地说删除它，如果你说删除它，你必须给出适当的解释并交替检查其他答案

【解决方案2】：

这里的主要问题是，对于某些justify-content 值，溢出分布会在其左右边缘溢出 flex 父级。

https://www.w3.org/TR/css-align-3/#distribution-values

因此引入了一个新关键字safe，可以控制溢出的行为方式。

https://www.w3.org/TR/css-align-3/#overflow-values

由于这是对 Flexbox 模型的全新补充，它还不能跨浏览器工作，space-evenly 也不能。

当它出现时（以及支持它的浏览器），这条 CSS 行将解决问题

justify-content: space-evenly safe;

一种可能的解决方法是使用自动边距，以在它们不会填充其父项时实现两个均匀间隔的项目，并且仅在右边缘溢出太多，可能是使用自动边距。

堆栈sn-p

.scroll{
  display: flex;
  /*flex-wrap: nowrap;                   this is the default, can be removed  */ 
   overflow-x: auto;
  /*justify-content: space-evenly;       removed  */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 75px;
  margin: 10px;
}

.item{
  margin-left: auto;                  /* added  */
}
.item:last-child{
  margin-right: auto;                 /* added  */
}

Too many
<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>

<br>Too few
<div class="scroll">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：

【解决方案3】：

.Wrapper {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  max-width: 100%; //this will solve issue
}

.TagWrapper:{
  display: flex;
  flex-shrink: 0;
}

【讨论】：

【解决方案4】：

您可以将 Parent 或 Container 的位置设置为 Relative，将其中的 child 设置为 absolute。

.Parent{
display: flex;
// and use any flexbox property
width: 100%;
height: 100%


position: relative; // important point
overflow: auto;
}

.Child{
position: absolute; // important point
}

【讨论】：