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

【问题标题】：how to wrap element when width is less than max width?当宽度小于最大宽度时如何包装元素？
【发布时间】：2020-08-10 13:52:38
【问题描述】：

我想显示 two column 布局或 two box in a row 当 with 大于 600px 时。但是当宽度小于 600 时，它应该以 1 below another 或其他词来包装 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 时它没有包裹盒子。

【问题讨论】：

当宽度缩小时，第二个框将换行到下一行！我在这里有什么遗漏吗？
没有得到..我期待这种行为..但不起作用
我刚刚在您的问题中添加了一张图片，第二个框将其包装到下一行。
见full screen mode
右边有个图标点击那个it will go in full scrren mode

标签： javascript html jquery css flexbox

【解决方案1】：

您可以使用 CSS 媒体查询来做到这一点。像这样的。

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

【讨论】：

【解决方案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;
   }
  }

全屏环绕：

【讨论】：