Question

我正在尝试创建一个父容器和一系列子容器。每个孩子都是一个正方形。子级应该在同一行上，并且应该有水平滚动。

这是代码：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.square {
  width: 20px;
  height: 20px;
  background-color: tomato;
  margin-right: 5px;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

如您所见，它不起作用。没有水平滚动，子代也不20x20px ...

Answer 1

将flex-shrink: 0;添加到.square。这意味着不要缩小尺寸：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.square {
  width: 20px;
  height: 20px;
  background-color: tomato;
  margin-right: 5px;
  flex-shrink: 0;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

Answer 2

在flex容器的子代上使用flex-shrink：0。这将阻止子项缩小以适合父项的宽度：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.square {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: tomato;
  margin-right: 5px;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

MDN：如果所有flex项目的大小都大于flex容器，则项目会根据flex-shrink进行收缩以适合其大小。

将flex-shrink设置为0将对此予以解决。

Answer 3

更新您的CSS

.square {
  min-width: 20px;
  height: 20px;
  background-color: tomato;
  margin-right: 5px;
}

更新属性为宽度到最小宽度

使用水平滚动创建一系列正方形

3 个答案: