我试图为一个网站建立一个简单的模板。我已经在下面的链接中包含了所有的代码,但只是想给我一个想法,我正在试图改变2个flex项目的布局时,最大宽度:600px;
当前布局如下:
这是一个header,设置了一个简单的Flex,左边是Flex:1(绿色),蓝色是Flex:2。
我希望做的是,如果最大宽度小于600像素,然后把绿色部分放在蓝色上方,使其大小相同。这是我的html和CSS,还添加了一个指向我的代码笔的链接
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
}
但这将把整个绿色和蓝色的行变成粉红色。
你知道我怎么把它格式化,让绿色高于蓝色,而且它们的尺寸都一样吗?我想让这个手机更友好。
LinktoCodepen
最佳答案
使用媒体查询将两个元素的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