Question

我正在尝试为网站构建一个简单的模板。我在下面的链接中包含了所有代码，但只是想知道我在尝试更改2个弹性项目的布局时最大宽度：600px;

目前布局如下：

这是一个标题，设置了简单的Flex，左边是Flex：1（绿色），蓝色是Flex：2。

我希望做的是如果max-width＆lt; 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 
}

但是这会将整个绿色和蓝色行变成粉红色。

任何想法我如何能够格式化它以使绿色高于蓝色并且它们的大小相同？我试图让这款手机变得友好。

LinktoCodepen

Answer 1

使用媒体查询将两个元素的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

CSS使用媒体屏幕大小进行灵活调整

1 个答案: