创建3行N列可横向滚动div，解决flex布局左对齐及额外间距问题

问题修复方案 #

你现在的配置存在两个核心问题：一是flex-direction: column没法实现3行N列的横向排列逻辑，二是缺少flex行对齐配置导致出现多余间距，按以下方式修改CSS即可：

.container {
  height: 95px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
}

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

配置说明

• 去掉flex-direction: column，保留默认的横向排列逻辑，新增flex-wrap: wrap允许元素换行
• 新增align-content: flex-start，强制所有换行的行靠容器顶部对齐，不会自动平分容器剩余高度产生多余间距
• 新增overflow-y: hidden避免出现垂直滚动条
• 容器95px的高度刚好容纳3行带边距的box元素，超出3行的元素会自动排列到新的列，触发横向滚动，实现你要的3行N列可横向滚动的效果

内容的提问来源于stack exchange，提问作者Samuel