Question

我有一个外部div，里面有4张牌。当我达到一个特定的宽度（完成媒体查询）我想要卡片包装，所以他们是2x2。如何使用flexbox实现这一目标？

我试图在断点上为.inner设置宽度：50％，但这并没有解决问题。我也试图在网上找到答案，但没有找到任何有效的方法。

.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>

Answer 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>

使用媒体查询将flexbox网格从4x1过渡到2x2

1 个答案: