CSS Flexbox光栅
如何创建一个flexbox光栅，它在元素之间具有相等的垂直和水平空间，而元素则填充每个50％的宽度？CSS Flexbox光栅
项目之间的空间应该最好是固定的大小（例如3px），但我可以生活在一个相对大小（即1％）。
高度应该灵活/流畅，即适用于任何数量的方块/物品。
注意
- CSS列不能使用，因为流量应该去从左至右为每一行（而不是向下）
- CSS电网将是很好的，但也不能使用，因为我需要这个移动设备上（这是目前不支持）
- 所以不要否决这个问题，谢谢
首选结果：
什么我到目前为止是这样的，但横向空间是不一样的垂直的。
目前的做法（不是真的satifying）
.-webcams {
display: flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-between;
}
.-webcams a {
display: block;
flex-basis: 49.5%;
margin-bottom: .75vw;
}
您可以使用计算的：
.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个方格。我还添加了一些预处理能力，使其更具动态性：https：//jsfiddle.net/LzmdzzLp/。 希望有帮助:) –
高度不固定在最终结果，所以谢谢@JamieBarker！你可以发布它作为答案，所以我可以相应地标记它？ –
@SimonFerndriger填充的东西似乎有点破解 - 当你的内容对于盒子太大时会发生什么？ https://jsfiddle.net/LzmdzzLp/1/ – Pete
发布这是一个解决方案，因为有人问我通过在OP因为它理应修复他们的问题，但它是从什么皮特发布不是一个百万英里远，它实际上是基于他的答案......
.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>
你到底为什么有人给了这个问题一个'-1'？这种布局是Instagram等应用中极受欢迎的用例，然而，这种解决方案不能从flexbox开箱即用！ - 如果这个问题不会被表决，我会删除它！ –
CSS列，CSS网格和CSS表具有_gap_类似的属性，而flexbox不具有。某些人投票的原因可能很多，但由于你已经有一段时间了，你应该知道发布一个最小工作代码片段，不仅是CSS，这可能是原因。该图像很好显示想要的最终结果，如果添加标记，我们可以_see_并建议最合适的解决方案 – LGSon
谢谢，CSS Grid会很好，但不适用于手机 –