文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何使用水平滚动设置flex项的宽度？

问如何使用水平滚动设置flex项的宽度？
EN

Stack Overflow用户
提问于 2021-07-21 08:04:16
回答 2查看 97关注 0票数 3

我正在使用display: flex在桌面视图上做一个3列的布局。

然而，开始在540px和以下，我仍然希望布局为3列，但它应该有一个水平滚动。我能够在white-space: nowrap; overflow-x: auto;中实现水平滚动。我的问题是我发现每个flex项目或列都太宽了。

我想在移动视图上显示1个或多个产品，但同时放一个水平滚动条来滚动第三个产品。

你知道如何为每个flex-item或column设置宽度吗？通过给它150px或任何取决于你的想法。非常感谢您的帮助。谢谢。

​

代码语言：javascript
运行
复制
.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;
  }
}
代码语言：javascript
运行
复制
<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>

​

flexbox
javascript
html
css
EN

回答 2

Stack Overflow用户

发布于 2021-07-21 16:13:55

不确定你期望的是什么，它不应该在540px以下换行，并使用滚动条保持3列。

flex-basis:33.33%会收缩它们，这是不够的，你需要设置一个最小宽度或重置flex-shrink。

具有最小宽度和最少代码的示例。

但是，请澄清预期的540px以下和541px以上的行为。

​

代码语言：javascript
运行
复制
.blog-articles-list {
  display: flex;
  flex-wrap: wrap;
  overflow:auto;/* ?? here or at 540px */
}

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

}

@media only screen and (max-width: 540px) {
  .blog-articles-list {
    flex-wrap: nowrap;
  }
.blog-articles-list .flex-item {
  min-width:50%
}
}
代码语言：javascript
运行
复制
<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">events</div> <a class="header-5 semi-bold" href="/blogs/articles/should-you-wash-your-face-with-cold-water">Should you wash your face with cold water?</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>

​

票数 2
EN

Stack Overflow用户

发布于 2021-07-21 16:25:34

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

​

代码语言：javascript
运行
复制
.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;
  }
}
代码语言：javascript
运行
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68465998

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档