Flexbox 实现水平滚动

我正在使用 Flexbox 布局制作一个购物中心网站，但 Flexbox 在某些区域会导致问题。

Flexbox 似乎在某些区域进行水平滚动，但我不希望这样。

您的问题是横幅中的图像太宽，无法适应大多数视口，因此它们迫使页面变宽。

没有简单的方法可以纯粹使用 CSS 来纠正此问题，而不会导致图像相互重叠或扭曲图像的纵横比。

此 CSS 将修复水平滚动，但会挤压第一个和最后一个图像：

.dittomall-banner img {
  width: 33%;
}

要真正解决问题，以便您的图像可以保持其原始纵横比，并且不会导致页面太宽，您应该编辑图像，以便将它们剪裁紧密，然后使用background-color on .dittomall-banner这与第一张和第三张图像中的背景颜色相同。然后，将图像放在横幅内居中。

假设您裁剪图像，使它们大小相同（例如 300 像素 x 100 像素），您的最终 HTML 和 CSS 可能如下所示：

HTML:

<div class="dittomall-banner">
  <div class="banner-inner-wrapper">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner1.png" alt="banner1">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner2.png" alt="banner2">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner3.png" alt="banner3">
  </div>
</div>

CSS:

.dittomall-banner {
  display: flex;
  background-color: #ed8c7b;
}
.banner-inner-wrapper {
  margin: 0 auto;
}