当宽度小于最大宽度时如何包装元素？

Question

我想在大于600px时1 below another two column布局或two box in a row box

这是我的代码

https://codesandbox.io/s/affectionate-cartwright-pw2mq?file=/src/styles.css:182-396

<div class="abc">
      <div class="card"></div>
      <div class="card"></div>
    </div>


.abc {
  display: flex;
  max-width: 600px;
  justify-content: space-around;
  flex-wrap: wrap;
  border: 2px dotted pink;
}
.card {
  padding: 100px;
  background-color: aqua;
  border: 2px solid;
  margin: 5px;
}

我的问题是当宽度小于600时它没有包装盒子。

Answer 1

您可以使用 CSS 媒体查询来完成。 像这样的东西。

@media only screen and (max-width: 600px) {
.abc {
  display: block;
 }
}

Answer 2

尝试这个：

DIV默认是block ，所以要保留卡片display:inline-block; .

.abc {
 display: flex;
 max-width: 600px;
 justify-content: space-around;
 flex-wrap: wrap;
 border: 2px dotted pink;
}
 .card {
  padding: 100px;
  background-color: aqua;
  border: 2px solid;
 margin: 5px;
 }

@media only screen and (max-width: 600px) {
 .abc {
  display: inline-block;
   }
  }

全屏环绕：