mobilブラウザでdiv1の下にdiv2を表示する - css：flex、

私は2つのdivを持っており、デソップコンピュータに正しく表示されます。しかし、モバイルブラウザでは見た目が良くありません。mobilブラウザでdiv1の下にdiv2を表示する - css：flex、

私はdiv2をモバイルブラウザ（sammeの行ではない）でdiv1にすることはできますか？

<html> 

<head> 
<style> 
.flexcontainer { 
    display: flex; 
    justify-content: space-between; 
    width: 1200px; 
    margin-bottom: 40px; 
    border:1px solid red; 
} 

.itemcontainer { 

    flex-wrap: wrap; 
} 
</style> 
</head> 

<body> 

<div class="flexcontainer itemcontainer "> 

<div id="div1" style="border:1px solid blue; width:280px; height:300px; margin-right:auto;"> Yessss </div> 
<div id="div2" style="border:1px solid blue; width:280px; height:300px; margin-left:auto">No</div> 
</body> 
</div> 
</html>

出典

2017-05-03 Hans Hansen

彼らがラップするとき、彼らは280pxでそれらの幅を維持する必要がありますか？ ..と水平方向の配置、中央、左または...？ – LGSon

@media (max-width: 767px) { 
    .flexcontainer{ 
    flex-direction : column;  
    } 
}

モバイルビューでフレックス方向を列に変更するだけです。

あなたは、このウェブサイトからフレキシボックスを練習し、理解することができます： https://flexboxfroggy.com/

出典

2017-05-03 13:20:30

まず親divため終了タグはbody修正の終了タグの下に、この である第二：あなたのコードに、このCSSスニペットを追加

@media (max-width: 767px) { 
    .flexcontainer { 
     display:block; 
     width: auto; 
    } 
    #div1, #div2 { 
     margin: 0 !important; 
    } 
}

これなら、私に知らせてあなたが探しているものです

出典

2017-05-03 11:00:29

mobilブラウザでdiv1の下にdiv2を表示する - css：flex、

答えて

関連する問題