css - 在 2 行和 2 列响应中打破 4 个 div

Question

你能帮帮我吗？我在一行中有 4 个 Div。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

现在，如果宽度为 <768px，我想将其中的 2 个移动到下一行。

我用 CSS 网格实现了这一点

.container {
    display: grid;
    rid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-rows: repeat(4, minmax(300px, auto));
    justify-content: center;
}

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .container {
         grid-template-columns: 40% 40%;
    }
 }

但不幸的是，CSS Grid 在 IE 浏览器版本 < Edge 中并没有得到很好的支持。所以我尝试使用 display:flex，但无法获得相同的结果。

这里是例子

谁能帮帮我？

找到解决方案:

.container{
    display: flex;
    flex-wrap: wrap;
}


.item {
    flex: 25%;
    max-width: 25%;
}


@media (max-width: 800px) {
    .item {
        flex: 50%;
        max-width: 50%;
    }
}


@media (max-width: 600px) {
    .item {
        flex: 100%;
        max-width: 100%;
    }
}

Answer 1

将您的.container 类设置为display:flex 和flex-wrap: wrap。

因此，当设备屏幕宽度变小以容纳 .item 框时，它们将被换行。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 80px;
  height: 80px;
  border: 1px solid #eee;
}