我正在尝试使用移动优先方法建立响应式设计的基准。
所以我要做的是，我在flex-box容器父对象（body）中添加了两个框（标头和邻居）的代码
我没有将px / em / rem中的绝对值分配给宽度，而是以百分比值提供了flex-basis。
现在，代码面临两个问题
a。即使我将flex-wrap：wrap应用于父对象的移动视图中，尽管孩子将其包裹到底部，但第一个孩子（头）和第二个孩子（邻居）之间还是有很大的差距。我不知道为什么在黑匣子（第一个子项-标头）应该堆叠在第二个子项（又名邻居）上的地方之间有这么大的空白。
b。在Google开发人员工具viz中，flex-wrap不适用于iPhone的尺寸。 414x736。在媒体查询中，我为这两个孩子的父母提供了一个属性-flex-wrap：wrap，但未得到应用
* {
padding: 0;
margin: 0;
}
body {
margin: 0;
text-decoration: none;
display: flex;
/* height:100vh; */
}
.header {
/* width:20%; */
/* height:20%; */
/* min-width: 192px; */
/* min-height: 200px; */
height: 20%;
flex-grow: 0;
display: flex;
background-color: black;
/* width: 100%; */
overflow: auto;
flex: 1;
flex-basis: 100%;
height: 20%;
}
@media only screen and (max-width: 420px) and (max-height:750px) {
body {
flex-wrap: wrap;
}
.header {
flex-basis: 600px;
flex-wrap:wrap;
/* flex: 1; */
}
.neighbour {
flex-basis: 300px;
display: flex;
justify-content: center;
flex:0;
}
}
.neighbour {
height: 20%;
background-color: red;
/* flex-basis:200px; */
flex: 1;
flex-basis: 50%;
}
.header>.icon {
/* width: 100px; */
/* flex:1; */
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
flex: 2;
flex-basis: 40%;
/* flex-shrink: 5; */
}
.header>.icon>img {
width: 50%;
height: 49%;
/* flex:1; */
/* background-color:pink; */
}
.header>.menu {
/* width: 400px; */
background-color: grey;
padding: 2em;
flex: 4;
flex-basis: 80%;
}
.grandfather {
/* position: absolute; */
/* left:0; */
top: 0;
/* bottom:0; */
background-color: orange;
height: 25vh;
float: right;
/* width:75%; */
flex-basis: 750px;
display: flex;
flex-grow: 1;
}
.father {
float: left;
height: 50%;
/* width:50%; */
background-color: blue;
flex-shrink: 2;
flex-basis: 600px;
border: 1px solid white;
}
.father.second {
flex-shrink: 4;
background-color: white !important;
}
.son {
float: left;
height: 50%;
width: 50%;
background-color: green;
flex-shrink: 0;
flex-basis: 50%;
}<html>
<link rel="stylesheet" href="style.css">
<body>
<div class="header">
<!-- <div class="icon">
<img src="test.jpeg">
</div>
<div class="menu">
<ul>
<li>home</li>
<li>city</li>
<li>offers</li>
</ul>
</div>
<div class="icon">
<img src="test.jpeg">
</div> -->
</div>
<div class="neighbour">
</div>
</body>
<!-- <div class="grandfather">
<div class="father">
<div class="son">
</div>
</div>
<div class="father second">
<div class="son">
</div>
</div>
</div> -->
</html>
* {
padding: 0;
margin: 0;
}
body {
margin: 0;
text-decoration: none;
display: flex;
/* height:100vh; */
}
.header {
/* width:20%; */
/* height:20%; */
/* min-width: 192px; */
/* min-height: 200px; */
height: 20%;
flex-grow: 0;
display: flex;
background-color: black;
/* width: 100%; */
overflow: auto;
flex: 1;
flex-basis: 100%;
height: 20%;
}
@media only screen and (max-width: 420px) and (max-height:750px) {
body {
flex-wrap: wrap;
}
.header {
flex-basis: 600px;
flex-wrap:wrap;
/* flex: 1; */
}
.neighbour {
flex-basis: 300px;
display: flex;
justify-content: center;
flex:0;
}
}
.neighbour {
height: 20%;
background-color: red;
/* flex-basis:200px; */
flex: 1;
flex-basis: 50%;
}
.header>.icon {
/* width: 100px; */
/* flex:1; */
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
flex: 2;
flex-basis: 40%;
/* flex-shrink: 5; */
}
.header>.icon>img {
width: 50%;
height: 49%;
/* flex:1; */
/* background-color:pink; */
}
.header>.menu {
/* width: 400px; */
background-color: grey;
padding: 2em;
flex: 4;
flex-basis: 80%;
}
.grandfather {
/* position: absolute; */
/* left:0; */
top: 0;
/* bottom:0; */
background-color: orange;
height: 25vh;
float: right;
/* width:75%; */
flex-basis: 750px;
display: flex;
flex-grow: 1;
}
.father {
float: left;
height: 50%;
/* width:50%; */
background-color: blue;
flex-shrink: 2;
flex-basis: 600px;
border: 1px solid white;
}
.father.second {
flex-shrink: 4;
background-color: white !important;
}
.son {
float: left;
height: 50%;
width: 50%;
background-color: green;
flex-shrink: 0;
flex-basis: 50%;
}<html>
<link rel="stylesheet" href="style.css">
<body>
<div class="header">
<!-- <div class="icon">
<img src="test.jpeg">
</div>
<div class="menu">
<ul>
<li>home</li>
<li>city</li>
<li>offers</li>
</ul>
</div>
<div class="icon">
<img src="test.jpeg">
</div> -->
</div>
<div class="neighbour">
</div>
</body>
<!-- <div class="grandfather">
<div class="father">
<div class="son">
</div>
</div>
<div class="father second">
<div class="son">
</div>
</div>
</div> -->
</html>
这是一个非常简单的代码，仅尝试使用flex-box创建流畅的设计，但无法实现。