如何在调整浏览器大小时获取要堆叠的 div 容器中的项目

Question

目前，我在浏览器调整大小期间无法放大和缩小主要内容。导航栏调整得很好，但其他内容却没有。 每当我调整浏览器大小时，div 元素似乎都保持相同的大小，而不是与其他所有内容一起调整。有没有人对我做错了什么或我可以尝试什么有任何建议？

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#blue {
background-color: #57afb5;
max-width: 470px;
height: 350px;
flex: 0 0 65%;
margin-left: auto;
margin-right: auto;
}
#dark-green {
background-color: #29914c;
max-width: 470px;
height: 350px;
flex: 0 0 65%;
margin-left: auto;
margin-right: auto;
}
#green {
background-color: #91e3ad;
max-width: 470px;
height: 350px;
flex: 0 0 65%;
margin-left: auto;
margin-right: auto;
}
#orange {
background-color: #c98a32;
max-width: 470px;
height: 350px;
flex: 0 0 65%;
margin-left: auto;
margin-right: auto;
}
#top {
display: flex;
margin-top: 2%;
}
#bottom {
display: flex;
margin-top: 2%;
}
.main-content {
display: flex;
flex-wrap: wrap;
}
.footer {
margin-top: 8%;
bottom: 0;
width: 100%;
text-align: center;
font-size: 10px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
}
/* responsive web design*/
@media only screen and (max-width: 960px) {
#blue {
width: 50%;
}
#dark-green {
width: 50%;
}
#green {
width: 50%;
}
#orange {
width: 50%;
}
.footer {
width: 100%;
}
}
/*end of responsive web design*/

<div class='main-content'>
<div id='Navbar_Link-Toggle' style='font-size: 20px'>
<i id='main' class='fas fa-bars'></i>
</div>
<div class='container'>
<div class='Navbar'>
<a class='links' href=''>FOOD</a>
<a class='links' href=''>FUN</a>
<img id='center-logo' src='img/SAMO.png'>
<a class='links' href=''>HISTORY</a>
<a class='links' href=''>LOCATION</a>
</div>
</div>
<div class='header'>
<img id='food' src='img/food.jpg'>
</div>
</div>
<div class='colors'>
<div id='top'>
<div id='blue'></div>
<div id='dark-green'></div>
</div>
<div id='bottom'>
<div id='green'></div>
<div id='orange'></div>
</div>
</div>

Answer 1

根据 Mozilla cdn，

弹性基础 CSS 属性设置弹性项的初始主大小。

因此，您可以将宽度设置为 50% 而不是弹性基础 65% 来解决上述问题。

#dark-green {
background-color: #29914c;
max-width: 470px;
height: 350px;
width: 50%;
margin-left: auto;
margin-right: auto;
}

Answer 2

您的彩色div不会在较小的视口宽度下调整大小，因为您将flex-basis设置为 65%。您可以通过将flex: 0 0 65%更改为flex: 1 0来解决您的问题。这将删除flex-basis属性(弹性速记中的第三个值(，并将flex-grow设置为 1。您还可以删除媒体查询中的width: 50%，因为flex-grow: 1实现相同的目的。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#blue,
#dark-green,
#green,
#orange {
max-width: 470px;
height: 350px;
flex: 1 0;
margin-left: auto;
margin-right: auto;
}
#blue {
background-color: #57afb5;
}
#dark-green {
background-color: #29914c;
}
#green {
background-color: #91e3ad;
}
#orange {
background-color: #c98a32;
}
#top,
#bottom {
display: flex;
margin-top: 2%;
}
.main-content {
display: flex;
flex-wrap: wrap;
}
.footer {
margin-top: 8%;
bottom: 0;
width: 100%;
text-align: center;
font-size: 10px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
}
/* responsive web design*/
@media only screen and (max-width: 960px) {
.footer {
width: 100%;
}
}
/*end of responsive web design*/

<div class='main-content'>
<div id='Navbar_Link-Toggle' style='font-size: 20px'>
<i id='main' class='fas fa-bars'></i>
</div>
<div class='container'>
<div class='Navbar'>
<a class='links' href=''>FOOD</a>
<a class='links' href=''>FUN</a>
<img id='center-logo' src='img/SAMO.png'>
<a class='links' href=''>HISTORY</a>
<a class='links' href=''>LOCATION</a>
</div>
</div>
<div class='header'>
<img id='food' src='img/food.jpg'>
</div>
</div>
<div class='colors'>
<div id='top'>
<div id='blue'></div>
<div id='dark-green'></div>
</div>
<div id='bottom'>
<div id='green'></div>
<div id='orange'></div>
</div>
</div>