我正在尝试为网站构建一个简单的模板。我已经在下面的链接中包含了所有代码，但只是为了提供一个想法，我试图在 max-width: 600px 时更改 2 个 flex 元素的布局；
目前的布局是这样的:
这是一个 header ，带有简单的 Flex 设置，左边是 Flex:1(绿色)，蓝色是 Flex:2。
我希望做的是如果 max-width < 600px 然后将绿色部分放在蓝色之上，并使它们大小相同。这是我的 html 和 CSS，还添加了指向我的 codePen 的链接
HTML:
<body>
<div class="top">
</div>
<div class="wrapper">
<div class="left">
<div class="logo">
</div>
<div class="menu">
</div>
</div>
<div class="mainContent">
</div>
</div>
</body>
我的 CSS 看起来像这样:
.left{
flex:1;
height:auto;
background-color: green;
background-position: fixed;
}
.mainContent{
flex:2;
background-color:blue;
height:100px;
}
@media screen and (max-width: 600px){
.mainContent{
background-color: pink;
}
.wrapper{ <---- Here it's turning both the Green & blue into pink (doing this as test)
flex-direction: column;
}
}
所以我已经尝试通过设置来做到这一点
.wrapper{
flex:direction:column
}
但这会将整个绿色和蓝色行变成粉红色。
知道如何格式化它，使绿色在蓝色之上，并且它们的大小相同吗？我正在努力使它适合移动设备。
最佳答案
使用媒体查询将两个元素的 width 设置为 100%。
然后使用 flex-wrap 和 order 属性将您的元素放在正确的位置。
您的 CSS 大致如下所示:
body{
background-color: #ccc;
margin:0px;
padding:0px;
}
.top{
margin:0px;
padding:0px;
width:100%;
height:100px;
background-color: yellow;
}
.wrapper{
display:flex;
flex-direction:row;
flex-wrap: wrap;
width: 100%;
}
.left{
flex:1;
height: 100px;
background-color: green;
background-position: fixed;
}
.mainContent{
flex:2;
background-color:blue;
height:100px;
}
@media screen and (max-width: 600px){
.mainContent{
background-color: pink;
min-width: 100%;
}
.left {
min-width: 100%;
}
}
这是一个更新的代码笔:https://codepen.io/anon/pen/pWMymE
关于html - CSS 随媒体屏幕尺寸变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46936566/