在小屏幕上显示行中的 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;
}