而不管：

Here’s the fiddle

我们在这做什么：

.flex-c {
    transform: rotate(90deg) scaleY(-1);
    transform-origin: left top;
}

设置方向 – 我们通过将容器的左侧移动到顶部,顺时针旋转四分之一来扭转它向上移动.

翻转整个she-bang – 我们在Y轴上翻转容器,使方向正确(在这种情况下显示为ltr)

.flex-c:after {
    content: '';
    display: table;
    clear: both;
}

修复浮动清算东西 – here上的良好资源

.flex-i {
    transform: rotate(90deg) scaleY(-1);
    height: 100px;
    width: 100px;
    background-color: gray;
    margin: 0 10px 10px 0;
    float: left;
}

恢复单个项目的翻转和扭曲 – 我们希望这些项目正确显示,因此我们使用转换规则解除它们以解决.flex-i规则.

那么让我们来看看最终结果发生了什么：

>大项目位于左上角.
>项目以列显示.
>列从上到下填充.
>增长是无限可扩展的.

一些缺点：

>翻转您的顶点以在此容器上进行布局.你可以通过将它保存在第三个容器中来缓解这种情况,如果你不介意额外的标记(我个人这样做,但是他们自己的标记).
>在旧版浏览器上这将失败 – 但你的flexBox解决方案也是如此,所以有点洗.

希望这可以帮助！

编辑：

因此,这些评论提出了一个相当明显的问题：“如果我们想要在这种布局中使用多个重要元素怎么办？”

完全合理,所提出的解决方案将留下一些相当丑陋的空白.不幸的是,如果你需要一个纯粹的内容填充,你需要更多的创意,并使用JavaScript布局系统(嘘,慢,讨厌,难以维护)或做一些其他几个砌体布局之前必须做的事：tuckpointing

我们将用虚拟物品来填补我们的空白空间.这些可以是预先选择的图像,平铺,任何能够在不干扰内容的情况下添加天赋以代替实际内容的任何内容.

我们是这样做的：

Fiddle

更新.flex-c容器以隐藏其溢出

.flex-c {
    transform: rotate(90deg) scaleY(-1);
    transform-origin: left top;
    overflow: hidden;
}

添加一个容易伪装的shim伪元素

.flex-i:not(.big):after {
    content: '';
    height: 100px;
    width: 100px;
    left: 110px;
    top: 0;
    position: absolute;
    background-color: pink;
}

另外：你可以用一种不那么CSS3但有更好支持的方式来做到这一点

.flex-i:after {
    content: '';
    height: 100px;
    width: 100px;
    left: 110px;
    top: 0;
    position: absolute;
    background-color: pink;
}
.flex-i.big:after {
    display: none;
}

这个小提琴的作用是创建一个粉红色的小盒子,从每个内容项的右侧弹出.如果那里已经有一个盒子,它就会被掩盖.如果它丢失了,我们会显示虚拟框.超级简单.