如何在响应式视图中水平滚动？

Question

正如您在图片中看到的那样，卡片是一张接一张地排列的。 但我希望它横向滚动，而不是一个一个地排序。

我该如何解决？

html

<div className="home__container only-mobile">
  <div className="home__content">
    <h3>{t('home.for_me')}</h3>
    <div>
      {campaignData
        ? campaignData.map((campaign, i) => {
          return (
            <DiscountPolicyCard
              campaignList={campaign}
              key={'campaignMobile' + i.toString()}
            />
          );
        })
        : null}
    </div>
  </div>
</div>

css

.home__container.only-mobile {
  display: grid;
  place-content: center;

  .home__content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 180px;

    h3 {
      color: gray;
    }

    &>div {
      justify-content: center;
      align-items: center;
    }
  }
}

Answer 1

 .container { display: flex; flex-wrap: no-wrap; gap: 1rem; max-width: 100%; overflow: auto; } .inner { background: lime; min-width: 200px; height: 100px; }

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

移除flex-wrap: wrap; 如果没有足够的空间，它会告诉浏览器将元素包装在 flexbox 中，这与您试图实现的目标相反。 如果删除后它不能开箱即用，请添加flex-wrap: no-wrap; 而是为容器添加一个min-width ，以确保它们不会被压扁。

这是使容器max-width: 100%和overflow: auto之后的第一步。