水平一次显示5个缩略图

Question

我需要一些帮助来确定缩略图容器的样式。使用当前的样式：

#modal-window.full-gallery {
  max-width: 961px;

.thumbnail-container {
    margin: 0 auto;
    height:64px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

.sp-thumbnail {
    cursor: pointer;
    width: 100%;
    height: 50px;
    margin-right: 7px;
    background-repeat: no-repeat;
    background-position: center;
    border: 0;
  }
}

这是我切换到移动视图时上述样式的结果：

当我在移动设备上查看它时，它会压缩所有10个缩略图，但是我希望它一次只显示五个缩略图，而在视图的两个边缘都显示两个缩略图，以便仅显示一半的图像，例如剪掉的图像，如下所示：

我尝试过：

.thumbnail-container {
    margin: 30px auto;
    width: 80%;
    overflow: hidden;
  }

但是，在移动视图中，并排显示了两列五个缩略图，换句话说，两个垂直列的五个缩略图是这样的：

我可能需要在媒体查询中执行此操作，因为这确实会影响桌面视图，但是我可以解决这个问题，我不确定如何在10个缩略图中显示5个，其中两个看起来像缩略图一样剪掉移动视图的边缘。

还有一点要澄清，这是一个模态功能。的html是：

<div class="modal-info">
  <div class="modal_message">
    <div class="modal-content">
      <div class="content-container">

        <div class="thumbnail-container">
          <button class="sp-thumbnail magic ada-el-focus" data-action="card-magic" title="View the Magic card"></button>
          <button class="sp-thumbnail th ada-el-focus" data-action="card-th" title="View the Celebration card"></button>
          <button class="sp-thumbnail ice-cream ada-el-focus" data-action="card-ice-cream" title="View the ice-cream card"></button>
          <button class="sp-thumbnail yoga ada-el-focus" data-action="card-yoga" title="View the Yoga card"></button>
          <button class="sp-thumbnail gaia ada-el-focus" data-action="card-gaia" title="View the Gaia card"></button>
          <button class="sp-thumbnail bbq ada-el-focus" data-action="card-bbq" title="View the BBQ card"></button>
          <button class="sp-thumbnail pinker ada-el-focus" data-action="card-pinker" title="View the Pink card"></button>
          <button class="sp-thumbnail spotlight ada-el-focus" data-action="card-spotlight" title="View the Spotlight card"></button>
          <button class="sp-thumbnail pals ada-el-focus" data-action="card-pals" title="View the Pals card"></button>
          <button class="sp-thumbnail father ada-el-focus" data-action="card-father" title="View the father card"></button>
        </div>
      </div>
    </div>
  </div>
</div>

所以我不确定我是否可以只处理thumbnail-container中的所有内容，还是需要调整sp-thumbnail中的某些内容。我一直在尝试不同的方法，但是我到处都是，没有得到想要的结果。

所以您可以说，我不希望thumbnail-container中的内容做出响应。让我解释一下，我希望在调整视图大小时调整图像的大小，但是随着视图变小，我希望缩略图在视图的边缘处被切除。

Answer 1

因此，对于您的thumbnail-container，我会离开display: flex，但会摆脱其他的flex type属性。 Flex肯定会让您感到困难。

所以它看起来像这样：

.thumbnail-container {
    margin: 0 auto;
    height:64px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

，对于sp-thumbnail，我将width:更改为min-width: 20%; Flex因引爆width而臭名昭著。它更容易接受min-width。

尝试一下。