html - html / css中移动视图中的水平滚动

Question

我正在做一个小提琴，我想在移动视图中水平滚动内容。

此时在桌面视图中，它们排列成一条直线，如下图所示：

我希望上述内容在移动视图中滚动。

我用来在桌面视图中以直线对齐内容的 CSS 代码是：

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;


}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.images img {
  max-width:100%;
  width: 100%;
}

问题陈述：

我想知道我应该在小提琴中添加哪些 CSS 代码，以便上面屏幕截图中的内容在移动视图中滚动。我尝试过，overflow: scroll and white-space: nowrap但不知何故我无法在移动视图中滚动内容。

标签： htmlcssresponsive-designmedia-queries

Answer 1

尝试将 flex none 添加到 div 以保留它们的大小以及您希望桌面开始的媒体查询。

.images {
    display: flex;
    align-items:center;
    background-color: #eee;
    padding: 1rem;
    overflow-x: scroll;
}

.images > div {
    flex: none;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
    max-width:100%;
    width: 100%;
}

@media (min-width: 960px) {

  .images {
     overflow-x: visible;
  }

  .images > div {
    flex-basis: 0;
    flex-grow: 1;
   }
}