javascript - 在小屏幕上显示行中的 div

Question

我正在尝试使用 Flex 显示这些 div。但是，当屏幕宽度小于大约 500px 时，我只能看到该行上有一个 div。当屏幕宽度变得小于以前时，如何在行上保留 2 个 div？

.box {
  display: flex;
  flex-wrap: wrap; 
  align-content: space-between;
}
.wrapper {
  margin: 20px;
  background: beige;
  border-radius: 15px;
}
.divla{
  margin: 15px;
}
@media(max-width:500px) {   
.box{      
  width: 50%;
}

 <div class="box">
   <div class="wrapper">
     <div class="divla">
        <h2 style="text-align:center; margin-top: 3px">hello</h2> 
     </div>
   </div>
   <div class="wrapper">
     <div class="divla">
        <h2 style="text-align:center; margin-top: 3px">hello</h2> 
     </div>
   </div>
   <div class="wrapper">
     <div class="divla">
        <h2 style="text-align:center; margin-top: 3px">hello</h2> 
    </div>
   </div>
</div> `

Answer 1

请在flex-wrap属性中使用nowrap而不是wrap。

.box {
  display: flex;
  flex-wrap: nowrap; 
  align-content: space-between;
}

您还可以删除 flex-wrap: nowrap;来自类，因为默认情况下设置了 nowrap。

.box {
  display: flex;
  align-content: space-between;
}