如何用Flexbox实现两行横向滚动图片布局（每行初始6张）

要实现两行布局，每行初始显示6张、剩余图片可横向滚动的效果，只需对原有单行代码做以下调整：

• 让外层容器垂直排列两个行容器
• 把20张图片拆成两组，分别放进两个行容器里
• 保留原有行容器的横向滚动、滚动吸附等特性

修改后的CSS代码 #

.image-gallery {
  display: flex;
  flex-direction: column; /* 改为垂直方向排列两行 */
  gap: 10px; /* 可选：设置两行之间的间距 */
}

.image-gallery .row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; /* 可选：给滚动条预留空间，避免遮挡图片 */
}

.image-gallery .row img {
  flex: 0 0 calc(100% / 6);
  scroll-snap-align: start;
  object-fit: cover; /* 可选：保证图片比例一致，避免拉伸变形 */
  height: 300px; /* 可选：固定图片高度，让两行布局更整齐 */
}

/* 可选：隐藏滚动条但保留滚动功能 */
.image-gallery .row::-webkit-scrollbar {
  display: none;
}
.image-gallery .row {
  scrollbar-width: none;
}

修改后的HTML代码 #

<div class="image-gallery">
  <!-- 第一行 -->
  <div class="row">
    <img src="https://picsum.photos/200/300?random=1" alt="Image 1">
    <img src="https://picsum.photos/200/300?random=2" alt="Image 2">
    <img src="https://picsum.photos/200/300?random=3" alt="Image 3">
    <img src="https://picsum.photos/200/300?random=4" alt="Image 4">
    <img src="https://picsum.photos/200/300?random=5" alt="Image 5">
    <img src="https://picsum.photos/200/300?random=6" alt="Image 6">
    <img src="https://picsum.photos/200/300?random=7" alt="Image 7">
    <img src="https://picsum.photos/200/300?random=8" alt="Image 8">
    <img src="https://picsum.photos/200/300?random=9" alt="Image 9">
    <img src="https://picsum.photos/200/300?random=10" alt="Image 10">
  </div>
  <!-- 第二行 -->
  <div class="row">
    <img src="https://picsum.photos/200/300?random=11" alt="Image 11">
    <img src="https://picsum.photos/200/300?random=12" alt="Image 12">
    <img src="https://picsum.photos/200/300?random=13" alt="Image 13">
    <img src="https://picsum.photos/200/300?random=14" alt="Image 14">
    <img src="https://picsum.photos/200/300?random=15" alt="Image 15">
    <img src="https://picsum.photos/200/300?random=16" alt="Image 16">
    <img src="https://picsum.photos/200/300?random=17" alt="Image 17">
    <img src="https://picsum.photos/200/300?random=18" alt="Image 18">
    <img src="https://picsum.photos/200/300?random=19" alt="Image 19">
    <img src="https://picsum.photos/200/300?random=20" alt="Image 20">
  </div>
</div>

关键调整说明 #

• 给.image-gallery添加flex-direction: column，让两个行容器垂直堆叠，形成两行结构
• 把20张图片平均分成两组放入两个.row，每行10张，确保每行有可滚动的剩余内容
• 新增object-fit: cover和固定图片高度，避免图片比例差异导致行高不齐
• 可选的滚动条隐藏样式，让整体布局更简洁美观

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