在CSS中缩进偶数行的六边形

我目前有一个六边形(图像)列表,当浏览器宽度减小时,我已将其包装到下一行.但是,当发生这种情况时,它们会形成第一张图像中看到的偶数线,每条线都从x轴上的同一点开始.

这是JS Fiddle(虽然,它们不是正确的,因为它们不是图像).真正的代码是:

    
        
    
    ...

CSS是:

.container {
    padding-top: 80px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.container span {
    line-height: 129px;
    display: inline-block;
}

.container .hex {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

我想要做的是交替行,使得每隔一行从六边形大小的偏移开始,如图2所示.还应注意,该示例还具有相对于从第一图像确定的相应位置的负y位置.

有没有办法用CSS做到这一点？如果可能的话,我想避免使用库.

这与此处提出的问题类似,但我需要整个结构能够拥有未确定的行数,因此我指定哪些项位于哪些行对我的应用程序不可行的解决方案.