javascript - 如何为具有水平滚动的 flex 元素设置宽度？

Question

我正在使用 display: flex在桌面 View 上做 3 列布局。
但是从 540px 开始和下面，我仍然希望布局是 3 列，但它应该有一个水平滚动。我能够通过 white-space: nowrap; overflow-x: auto; 实现水平滚动.我的问题是我发现每个 flex 元素或列都太宽了。
我想在移动 View 上显示 1 或产品，但同时放置一个水平滚动条来滚动第三个产品。
您知道如何为每个 flex-item 设置宽度吗？或 column ?通过给它一个 150px 或任何取决于你的想法。非常感谢您的帮助。谢谢。

.blog-articles-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow-x: unset;
  white-space: normal;
}

.blog-articles-list .flex-item {
  flex-basis: 33.33%;
}

@media only screen and (max-width: 540px) {
  .blog-articles-list {
    white-space: nowrap;
    overflow-x: auto;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

<div class="col-12">
  <div class="blog-articles-list">
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>

    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">guides</div> <a class="header-5 semi-bold" href="/blogs/articles/how-to-lighten-pigmentation-naturally">How to lighten pigmentation naturally?</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
</div>

Answer 1

只需添加 flex-shrink:0和 flex-basis:100%

.blog-articles-list {
  display: flex;
  overflow:auto;
}

.blog-articles-list .flex-item {
  flex-basis: 33.33%;
}

@media only screen and (max-width: 540px) {
  .blog-articles-list .flex-item {
    flex-basis: 100%;
    flex-shrink: 0;
  }
}

<div class="col-12">
  <div class="blog-articles-list">
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>

    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">campaigns</div> <a class="header-5 semi-bold" href="/blogs/articles/join-the-movement">Join the movement</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
    <div class="blog-article-info flex-item mb-40">
      <img class="image" src="//website/placeholder-join-the-movement-img_480x.jpg?v=1626159716">
      <div class="blog-article-detail">
        <div class="article-tag uppercase header-6 semi-bold color-green mb-5">guides</div> <a class="header-5 semi-bold" href="/blogs/articles/how-to-lighten-pigmentation-naturally">How to lighten pigmentation naturally?</a>
        <p class="rte color-black"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
</div>