Question

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

我不明白发生了什么这是代码段和codepen

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢

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;

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

Stack snippet

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

<强>演示：

＆＃13;

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

＆＃13;

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

＆＃13;

这将阻止元素在两边都超出范围。
所有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;
}

使用flexbox水平滚动div的问题

3 个答案: