html - 带有 flexbox 元素的水平滚动条

Question

我在一个带有 display: flex 的容器中有 6 张图片，所以容器的宽度被分成 6 张图片。

我想显示 2 张图片和第 3 张图片的一部分，而另外 3 张图片在右侧紧挨着它们，但在用户滚动到右侧之前不会显示。

我隐藏了水平滚动条，但是我想保留滚动功能，但是如图this fiddle , 显示 6 张图像。

如何只显示 2 个图像和第 3 个图像的一部分，而其他 3 个图像隐藏在前 3 个图像的右侧？

代码如下:

.images {
  margin-bottom: 20px;
  border-bottom: 1px solid #dae2e4;
  padding-bottom: 20px;
}

.images__gallery {
  display: -webkit-box;
  display: flex;
  padding-right: 5px;
  margin: -3px;
  overflow-y: hidden;
  overflow-x: scroll;
  margin-bottom: -50px;
  padding-bottom: 50px;
}

.images__gallery-item {
  /*overflow: hidden;*/
  position: relative;
  padding: 1%;
  flex-basis: 32%;
  height: 25vw;
  margin: 3px;
  border: 1px solid #dae2e4;
}

.images__gallery-item img {
  position: absolute;
  left: -1000%;
  right: -1000%;
  top: -1000%;
  bottom: -1000%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
}

.images__title {
  line-height: 21px;
  margin-bottom: 17px;
  color: #707a81;
}

@media (min-width: 420px) {
  .images__gallery-item {
    flex-basis: 24%;
    height: 20vw;
  }
}

@media (min-width: 530px) {
  .images__gallery-item {
    flex-basis: 19%;
    height: 16vw;
  }
}

@media (min-width: 768px) {
  .images__gallery-item {
    flex-basis: 16%;
    height: 12.5vw;
  }
}

<aside class="sidebar sidebar__frame">
  <div class="images sidebar__block">
    <div class="images__title">Images:</div>
    <div class="images__gallery">
      <div class="images__gallery-item">
        <a href="" target="_blank">
          <img src="http://placehold.it/100/150" alt="Wikimedia">
        </a>
      </div>
      <div class="images__gallery-item">
        <a href="" target="_blank">
          <img src="http://placehold.it/100/100" alt="Wikimedia">
        </a>
      </div>
      <div class="images__gallery-item">
        <a href="" target="_blank">
          <img src="http://placehold.it/100/120" alt="Wikimedia">
        </a>
      </div>
      <div class="images__gallery-item">
        <a href="" target="_blank">
          <img src="http://placehold.it/100/105" alt="Wikimedia">
        </a>
      </div>
      <div class="images__gallery-item">
        <a href="" target="_blank">
          <img src="http://placehold.it/100/122" alt="Wikimedia">
        </a>
      </div>
      <div class="images__gallery-item">
        <a href="" target="_blank">
          <img src="http://placehold.it/100/195" alt="Wikimedia">
        </a>
      </div>
    </div>
  </div>
  <!-- .images-->
</aside>

在这种情况下如何隐藏水平滚动条？

Answer 1

flex 容器的初始设置是 flex-shrink: 1 .这意味着 flex 元素可以收缩以防止容器溢出。您可以使用 flex-shrink: 0 禁用此功能。

将此添加到您的代码中:

.images__gallery-item {
    flex-shrink: 0;
}