如何在響應式視圖中水平滾動？

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之后的第一步。