html - 使用 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>