html - 如何在 html/css 的移动 View 中水平滚动方框？

Question

我有一个在桌面 View 中看起来很完美的网站。我创建了 fiddle以及因此很容易进行更改。

我用来对齐一行中的方 block 的 CSS 代码片段是:

.squares {
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 1rem;
  flex-wrap: wrap;
}

.squares .square {
    width: 13%;
    text-align: center;
    height: 150px;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145, 147, 150);
    border-radius: 10px;
   }

问题陈述:

我想知道应该添加哪些 CSS 代码 here或进行更改，以便我能够水平滚动方框在移动 View 中，类似于以下屏幕截图:

此时，在移动 View 中它适合屏幕但不水平滚动。

Answer 1

也尝试改变:

.squares{
  flex-wrap: nowrap;
}
.squares .square{
  flex: 1 0 auto;
}

这可以防止方 block 转到第二行。