【发布时间】：2021-09-28 14:56:38
【问题描述】：
我正在使用display: flex 在桌面视图上进行 3 列布局。
但是从540px 及以下开始，我仍然希望布局为 3 列，但它应该具有水平滚动。我能够通过white-space: nowrap; overflow-x: auto; 实现水平滚动。我的问题是我发现每个弹性项目或列都太宽了。
我想在移动视图上显示 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>【问题讨论】：
-
你可以用 column 代替 flex 并给它一个明确的宽度
-
nowrap将防止断行，从而只生成一行。是这样吗？只有overflow-x:auto才能实现水平滚动 -
@SalilRajkarnikar 你是说我应该给它一个 flex-direction 列还是删除
display: flex然后给它的孩子一个display inline？
标签： javascript html css flexbox