我现在所拥有的是当窗口重新调整大小时,框会相应地调整以适合宽度。但是,我想要的是至少有两个盒子移动到下一行,而不是顶部的 3 个和 1 个。
这是否可以通过 flexbox 实现,如果不能,我将如何实现?
fiddle :https://jsfiddle.net/jzhang172/cqdwLyxu/
.line{
display:flex;
width:100%;
margin-bottom:30px;
flex-wrap:wrap;
align-items:center;
justify-content:center;
}
body,html{
margin:0;
padding:0;
position:relative;
}
*{
box-sizing:border-box;
}
.box{
width:200px;
min-width:200px;
background:blue;
margin:0 10px 0 10px;
height:200px;
}
<div class="line">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="line">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
最佳答案
您可以使用媒体查询将 flex-basis
更改为 50% 换行,强制每行两个元素。
将此添加到您的 CSS:
@media ( max-width: 800px ) {
.box {
flex-basis: calc(50% - 20px);
margin: 10px;
}
}
关于javascript - 使 flex 元素一次包裹两个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36022070/