html - 行中的元素之间没有额外的间距

Question

所以我正在使用新的 flexbox CSS 模块来尝试创建两列框。

目标: 框必须按左-右-左-右等顺序排列，而不是按列顺序(需要行) 盒子可以有不同的高度 除了通过 css 指定的内容之外，框之间不应有垂直间距

除了列表中的最后一项，我已经完成了所有任务。无论我做什么，如果其中一排的元素比另一排高，它不可避免地会将下一行的元素向下推。我不希望出现这种行为，并且再次强调，使用列而不是行不是一种选择。

这里有一些您可以使用的简化标记:

HTML:

<div class="blocks">
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
</div>

CSS:

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

.block {
    width: calc(50% - 15px);
    background: gray;
    outline: 1px solid red;
    margin-bottom: 10px;
}

.block:nth-child(2n+1){
    margin-right: 30px;
}

.block:nth-child(1) {
    height: 150px;
}

.block:nth-child(2) {
    height: 190px;
}

.block:nth-child(3) {
    height: 180px;
}

.block:nth-child(4) {
    height: 160px;
}

.block:nth-child(5) {
    height: 190px;
}

.block:nth-child(6) {
    height: 150px;
}

在此示例中，列中的元素之间的间距永远不应超过 10 像素。

这是一个供你们玩的 JS Fiddle:

http://jsfiddle.net/esryrk3w/

请注意列中元素之间的额外垂直间距。

Answer 1

解决方案？停止使用 flexbox。

只需使用交替 float 。第一个将第二个盒子和之后的第二个盒子向右浮动，第二个将第一个盒子和之后的第二个盒子向左浮动。问题已解决。

.block:nth-child(2n+2) {

    // POSITIONING
    float: right;
}

.block:nth-child(2n+1) {

    // POSITIONING
    float: left;
}

工作 JS fiddle :http://jsfiddle.net/esryrk3w/1/