使用flexbox水平滚动div的问题

Question

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

我不明白这里发生的是代码片段和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>

谢谢

Answer 1

这里的主要问题是，对于某些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;

---

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

堆栈代码段

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

Answer 2

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

演示：

.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都以这种方式连续显示。

Answer 3

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

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