フレックスボックスで横スクロール

Question

私はフレックスボックスレイアウトのショッピングモールサイトを作っていますが、フレックスボックスは特定の領域で問題を引き起こします。

Flexboxは特定の領域で水平スクロールするようですが、私はそれを望んでいません。

Answer 1

あなたの問題は、バナー内の画像が広すぎてほとんどのビューポートに収まらないため、ページが広くなることです。

画像を重なり合わせたり、画像のアスペクト比を歪ませることなく、CSSでこれを修正するのは簡単ではありません。

このCSSは、水平方向のスクロールを修正しますが、それは最初と最後の画像をつぶします：

.dittomall-banner img { 
    width: 33%; 
} 

あなたのイメージは元の縦横比を維持してもページを起こさないように、本当に物事を修正するには広すぎる場合は、画像をきちんと切り抜くように編集し、最初の画像と3番目の画像の背景色と同じのbackground-colorを使用してください。次に、画像をバナー内で中央に配置します。

HTML：：

<div class="dittomall-banner"> 
    <div class="banner-inner-wrapper"> 
    <img src="http://www.dittomall.com/theme/dittomall/img/banner1.png" alt="banner1"> 
    <img src="http://www.dittomall.com/theme/dittomall/img/banner2.png" alt="banner2"> 
    <img src="http://www.dittomall.com/theme/dittomall/img/banner3.png" alt="banner3"> 
    </div> 
</div> 

CSS：

彼らはすべて同じサイズの（例えば、300ピクセル×100ピクセル）、最終的なHTMLとCSSは次のようになりますしているので、あなたは画像をトリミングと仮定すると、

.dittomall-banner { 
    display: flex; 
    background-color: #ed8c7b; 
} 
.banner-inner-wrapper { 
    margin: 0 auto; 
} 

Answer 2

画面サイズに合わせてバナーサイズを変更する場合は、この方法をお試しください。 CSSを次のコードに置き換えてください：

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%; 
    } 

希望しますか？