带有弹性框项目的水平滚动条

Question

我在的容器中有6张图像display: flex，因此容器的宽度除以6张图像。

我想显示2张图像和第3张图像的一部分，而其他3张图像则在右侧，但直到用户向右滚动时才显示。

我隐藏了水平滚动条，但我想保留滚动功能，但是如该小提琴所示，显示了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-shrink: 0。

将此添加到您的代码：

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