Question

我现在拥有的是当窗口重新调整大小时，相应的框会调整以适应宽度。但是，我想要的是至少有两个盒子移动到下一行而不是3个顶部和1个。

这是否可以通过flexbox实现，如果没有，我将如何实现这一目标？

小提琴：https://jsfiddle.net/jzhang172/cqdwLyxu/

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用将flex-basis更改为50％的媒体查询，每行强制两个项目。

将此添加到您的CSS：

@media ( max-width: 800px ) {
    .box {
           flex-basis: calc(50% - 20px);
           margin: 10px; 
         }
}

Revised Demo

使弹性项目一次包裹两个

1 个答案: