Flexbox进行水平滚动 [英] Flexbox makes horizontal scrolling

问题描述

Flexbox似乎在某些区域进行水平滚动，但我不要这样做。

解决方案

如果您希望横幅大小根据您的屏幕大小更改，请尝试此操作。请用下面的代码替换你的CSS：

  html，body {
 margin：0; 
 padding：0; 
} 
 body {
 display：-webkit-box; 
 display：-ms-flexbox; 
 display：flex; 
 -webkit-box-orient：vertical; 
 -webkit-box-direction：正常; 
 -ms-flex-direction：column; 
 flex-direction：column; 
最小高度：100 vh; 
 align-items：center; 
 overflow：hidden; 
} 
 header {
 flex：1 100％; 
} 
 .dittomall-banner {
 display：flex; 
 flex：1 100％; 
} 
 img {
 width：100％; 
} 
  

希望这有助于您！

I'm making a shopping mall site with flexbox layout, but flexbox causes problems in certain areas.

Flexbox seems to make horizontal scrolling in certain areas, but I don't want that.

解决方案

Try this if you want your banner size to change according to your screen size. Please replace your CSS with the below code:

    html,body {
        margin:0;
        padding:0;
    }
    body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100 vh;
        align-items:center;
        overflow:hidden;
    }
    header {
        flex: 1 100 %;
    }
    .dittomall-banner {
        display: flex;
        flex: 1 100%;
    }
    img {
        width:100%;
    }

Hope this will help!

这篇关于Flexbox进行水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！