CSS Flexbox 光栅答案

【问题标题】：CSS Flexbox RasterCSS Flexbox 光栅
【发布时间】：2017-03-21 00:21:36
【问题描述】：

如何创建一个弹性框光栅，它在元素之间具有相等的垂直和水平空间，而元素填充每个 50% 的宽度？

项目之间的空间最好是固定大小（例如 3px），但我可以接受相对大小（例如 1%）。

高度应该灵活/流动，即适用于任意数量的方块/项目。

备注

不能使用 CSS 列，因为每一行的流应该从左到右（而不是向下）
CSS 网格会很好，但也不能使用，因为我需要在移动设备上使用它（目前不支持）
所以不要拒绝这个问题，谢谢

首选结果：

我目前有的是这个，但是水平空间和垂直空间不一样。

目前的方法（不是很令人满意）

.-webcams {
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-between;


}
.-webcams  a {
    display: block;
    flex-basis: 49.5%;
    margin-bottom: .75vw;
  }

【问题讨论】：

为什么有人给这个问题-1？这种布局是 instagram 等应用程序中非常流行的用例，然而，解决方案并不是从 flexbox 中开箱即用的！ - 如果这个问题不被投票，我会删除它！
CSS 列、CSS Grid 和 CSS Table 具有类似 gap 的属性，而 flexbox 没有。有人投反对票的原因可能很多，但既然你已经有一段时间了，你应该知道发布一个最小的工作代码 sn-p，而不仅仅是 CSS，这可能是原因。图片很好地显示了想要的最终结果，如果您添加标记，我们可以看到并建议最合适的解决方案
谢谢，CSS Grid 会很好，但不能在手机上运行
谢谢@LGSon - 我现在为我的问题添加了解释。请您现在就我的问题投票好吗？

标签： css flexbox

【解决方案1】：

你可以使用计算：

.outer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 400px;
  height: 400px;
  border: 1px solid #000000;
}

.inner {
  width: calc(50% - 2px);   /* the 2px is the amount of gap divided by 2 */
  height: calc(50% - 2px); 
  background: green
}

.outer div:nth-child(2n) ~ .inner {
  margin-top: 4px;    /* the 4px is the amount of gap */
}

<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
</div>

【讨论】：

我已经为此 +1 了，但可以稍微改进一下，使其也具有动态高度，因此您可能拥有超过 4 个方格。我还添加了一些预处理功能以使其更加动态：jsfiddle.net/LzmdzzLp。希望有帮助:)
最终结果的高度不是固定的，所以谢谢@JamieBarker！您可以将其发布为答案，以便我可以相应地标记它吗？
@SimonFerndriger 填充的东西似乎有点小技巧 - 当你的内容对于盒子来说太大时会发生什么？ jsfiddle.net/LzmdzzLp/1
如果 flexbox 有一个 space-between 功能来提供所需的空间，那就太好了
问题是 flex-wrap 会导致您之间的空间出现问题，为了使其正常工作，您必须有两个内部容器，但您仍然有关于设置高度的问题对于您的代码 - 由于您没有在问题中显示它，我无法给出完整的答案

【解决方案2】：

将其作为解决方案发布是因为 OP 要求我这样做，因为它据说可以解决他们的问题，但它与 Pete 发布的内容相距不到一百万英里，实际上是基于他的回答...

.outer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 400px;
  background: red;
}

.inner {
  width: calc(50% - 2px);
  height: 0;
  padding-bottom: calc(50% - 2px);
  background: green;
}

.outer div:nth-child(2n)~.inner {
  margin-top: 4px;
}

<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
</div>

【讨论】：