Css 具有楼梯效果的Flexbox边距和偏移问题

我试图用flexbox实现的布局有问题。我希望我的柱子偏移量比前一个稍微多一些，以产生对角线/楼梯效果，但我也希望它们保持与flexbox自动提供的高度相同的高度

一开始，我想：我只需要让它们与flexbox的高度相同，然后用边距偏移它们，但似乎flexbox的垂直边距处理方式与flexbox完全不同，因为它们推动盒子的上部，而不是整个盒子。。。这导致我的所有列底部对齐，但这不是我想要实现的

注意：我知道这可以通过很多其他方式实现，比如相对定位、在父对象上添加填充、设置最小高度、使用JavaScript等，但我希望保持文档流的完整性、忽略对象的大小并避免使用JS。我还读到，即将到来的弹性缺口或项目缺口可能会在未来解决此类问题，但是

这是一个用于文档持久性的文本涂鸦

Flex               Expected
-                  -
|    -             |    -
|    |    -        |    |    -
|    |    |        |    |    |
-    -    -        -    |    |
                        -    |
                             -

以下是我希望通过flexbox spec实现的目标和当前结果的现场演示：

*{
框大小：边框框；
}
.包裹{
显示器：flex；
弯曲方向：行；
宽度：100%；
}
.盒子{
弹性：0.33%；
填充：0 10px；
}
.box:第n个孩子（2）{
边缘顶部：60像素；
}
.box:第n个孩子（3）{
边缘顶部：120px；
}
.内胆{
身高：100%；
文本对齐：居中；
背景：#ccc；
边界半径：10px；
填充：20px；
盒影：5px 5px 15px rgba（0,0,0,0.2）；
}
.wrap2{
溢出：隐藏；
}
.box2{
浮动：左；
宽度：33%；
填充：0 10px；
}
.box2:n个孩子（2）{
边缘顶部：60像素；
}
.box2:n个孩子（3）{
边缘顶部：120px；
}
.box-2{
最小高度：300px；
文本对齐：居中；
背景：#ccc；
边界半径：10px；
填充：20px；
盒影：5px 5px 15px rgba（0,0,0,0.2）；
}

Flexbox
Lorem ipsum dolor sit amet，奉献精英。这是一种新的化学物质，是一种积累，是一种新的化学物质！
Lorem ipsum dolor sit amet，奉献精英。发明者，perferendis。
Lorem ipsum dolor sit amet，奉献精英。嗯，是吗？
预期
Lorem ipsum dolor sit amet，奉献精英。这是一种新的化学物质，是一种积累，是一种新的化学物质！
Lorem ipsum dolor sit amet，奉献精英。发明者，perferendis。
Lorem ipsum dolor sit amet，奉献精英。嗯，是吗？

使用底部边距。见下文

*{
框大小：边框框；
}
.包裹{
显示器：flex；
弯曲方向：行；
宽度：100%；
}
.盒子{
弹性：0.33%；
填充：0 10px；
}
.box:第n个孩子（2）{
边缘顶部：60像素；
边缘底部：-60px；
}
.box:第n个孩子（3）{
边缘顶部：120px；
边缘底部：-120px；
}
.内胆{
身高：100%；
文本对齐：居中；
背景：#ccc；
边界半径：10px；
填充：20px；
盒影：5px 5px 15px rgba（0,0,0,0.2）；
}
.wrap2{
溢出：隐藏；
}
.box2{
浮动：左；
宽度：33%；
填充：0 10px；
}
.box2:n个孩子（2）{
边缘顶部：60像素；
}
.box2:n个孩子（3）{
边缘顶部：120px；
}
.box-2{
最小高度：300px；
文本对齐：居中；
背景：#ccc；
边界半径：10px；
填充：20px；
盒影：5px 5px 15px rgba（0,0,0,0.2）；
}

Flexbox
Lorem ipsum dolor sit amet，奉献精英。这是一种新的化学物质，是一种积累，是一种新的化学物质！
Lorem ipsum dolor sit amet，奉献精英。发明者，perferendis。
Lorem ipsum dolor sit amet，奉献精英。嗯，是吗？
预期
Lorem ipsum dolor sit amet，奉献精英。这是一种新的化学物质，是一种积累，是一种新的化学物质！
Lorem ipsum dolor sit amet，奉献精英。发明者，perferendis。
Lorem ipsum dolor sit amet，奉献精英。嗯，是吗？

这可能是一个解决方案，但正如上面提到的，我希望保留自然的文档流，并且此解决方案会将容器的内容偏移到其界限之外（在这个特定的示例中，它不会导致任何vosia；问题，但是如果我们的.wrap和.wrap2声明了背景色，我们会看到列溢出了它们的容器）。@davidlaponte，on.wrap“只需添加”padding bottom:120px（最后一个.box子项的上边距）。这将解决背景颜色问题，以及下面下一个元素的距离。@Marian07事实上，并排的列数未知，因此如果没有JavaScript来计算列数，我无法使用填充底部的解决方案。