我试图为一个网站建立一个简单的模板。我已经在下面的链接中包含了所有的代码,但只是想给我一个想法,我正在试图改变2个flex项目的布局时,最大宽度:600px;
当前布局如下:
html - CSS随媒体屏幕大小变化-LMLPHP
这是一个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-wraporder属性将元素放在正确的位置。
您的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

09-25 10:33
查看更多