问题是,当我减少浏览器窗口容器时,一个接一个地跳转到下一行,并且在最小浏览器窗口宽度上应该有一个列一个接一个地包含3个容器,但这不会发生。而不是这样,容器变得越来越小并且保持在一条线上。我尝试使用min-width(它甚至在代码中,我已粘贴在这里:p)
body {
margin: 0;
padding: 0;
background-color: #2c3e50;
font-family: strait, sans-serif;
}
#box {
box-sizing: border-box;
margin: 0 auto;
display: flex;
min-width: 70vw;
height: 100vh;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.container {
min-width: 20vw;
height: 50vh;
flex-flow: column wrap;
border: 2px solid darkgray;
overflow: hidden;
background-color: #d9d9d9;
opacity: 0;
animation: slide-animation 1s forwards;
}
@keyframes slide-animation {
from {
opacity: 0;
margin-top: 300px;
}
to {
opacity: 1;
margin-top: 0;
}
}
<div id="box">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
由于您使用的是vw
单位,因此弹性项目的大小将始终是视口大小的百分比。如果项目中没有任何内容,它们可以保持缩减为零。当需要标准百分比或视口百分比长度的项目进行换行时,这是一个问题。
使用固定单位。
而不是这个:
min-width: 20vw
试试这个:
min-width: 12em
body {
margin: 0;
padding: 0;
background-color: #2c3e50;
font-family: strait, sans-serif;
}
#box {
box-sizing: border-box;
margin: 0 auto;
display: flex;
min-width: 70vw;
height: 100vh;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.container {
min-width: 12em;
height: 50vh;
flex-flow: column wrap;
border: 2px solid darkgray;
overflow: hidden;
background-color: #d9d9d9;
opacity: 0;
animation: slide-animation 1s forwards;
}
@keyframes slide-animation {
from {
opacity: 0;
margin-top: 300px;
}
to {
opacity: 1;
margin-top: 0;
}
}
<div id="box">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>