创建行大小为 3，列大小为 N 的 div

Question

我想显示div以便水平滚动。我已经创建了一个 display flex 容器，但我不确定我还需要做什么才能让盒子向左对齐。

.container {
  height: 95px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.box {
  border: 1px solid black;
  margin: 5px;
  width: 100px;
}

未注释的代码工作正常。我评论列的时刻，我得到额外的间距

Answer 1

这是你想要的吗？：HERE

.container {
  height: 95px;
  border: 1px solid black;
  display: flex;
  /* flex-direction: column; */
  overflow-x: auto;
}

.box {
  border: 1px solid black;
  margin: 5px;
  flex: 0 0 33%;
}

Answer 2

CSS align-content 和 justify-content 属性允许您选择 flexbox 中项目的显示位置。我建议您查找它们（例如 on CSS tricks）以了解它们的工作原理。在这种情况下，将 align-content: flex-start; 设置为 .container 对象就可以了。

创建行大小为 3，列大小为 N 的 div

Create divs with row size as 3 and column to be of size N

html

css

sass

angular