使用媒体查询将 flexbox 网格从 4x1 转换为 2x2答案

【问题标题】：Transition flexbox grid from 4x1 to 2x2 using media query使用媒体查询将 flexbox 网格从 4x1 转换为 2x2
【发布时间】：2018-08-24 09:33:56
【问题描述】：

我有一个外部 div，里面有 4 张卡片。当我达到一个特定的宽度（通过媒体查询完成）时，我希望卡片可以包装成 2x2。

我尝试将width:50% 设置为.inner 的断点，但这并不能解决问题。

如何使用 flexbox 实现这一点？

.outer{display:flex;flex-wrap:wrap;}
.inner{width:100px;height:200px;background-color:blue;margin-right:10px}

<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>

【问题讨论】：

将内部 div 的 flex-basis（或宽度）更改为 50%
@Michael_B 你为什么重新打开这个？ target duplicate 似乎以更广泛适用的方式解决了这个问题。
看起来你没有尝试过任何东西，也没有投入任何研究时间。
我在我的编辑中解释了。我阅读了副本，我没有看到这个特定问题的任何明确答案。它还强调了预处理器代码、边距和相对定位，这与解决手头的问题无关。 @泰勒H
娜奥米：jsfiddle.net/7fye3uby

标签： html css flexbox

【解决方案1】：

你可以这样做：

body,
.outer,
.inner {margin: 0}

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

.inner {
  flex: 1;
  height: 200px;
  margin: 0 5px;
  background: blue;
}

@media (max-width: 480px) {
  .inner {
    flex: 0 1 calc(50% - 10px); /* - 2 x 5px left & right margin */
    margin-bottom: 10px;
  }
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

【讨论】：