在美孚浏览器上的div1下显示div2 - css：flex，

我有两个div，它在destop计算机上正确显示。但在移动浏览器中，他们看起来不太好。在美孚浏览器上的div1下显示div2 - css：flex，

我怎样才能让div2在div1下的移动浏览器（不在samme线）？

<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

当他们换，他们应该保持在280像素它们的宽度？ ..和水平对齐，居中，左或...？ – LGSon

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

只是在移动视图中将灵活方向更改为列。

你可以练习，并从该网站了解Flexbox的： 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

在美孚浏览器上的div1下显示div2 - css：flex，

回答

相关问题