Html 具有css3柔性的砌体布局

我试图使用

display:flex

在我的物品有不同尺寸之前，它一直运行良好：

下面是一个例子：

我想要大项目下方的小项目将其包裹起来（大项目下方“一行”中的两个项目应该很容易适合，但只有一个项目适合）

css flex是否有可能做到这一点？
我认为对于您正在尝试做的事情，使用
float:left会更容易
而不是
flex
属性。我做了一个更新


.flex-c{
显示：块；
高度：450px；
宽度：自动；
}
.flex-i{
高度：100px；
宽度：100px；
浮动：左；
背景：灰色；
利润率：0 10px 10px 0；
}
.大{
宽度：210px；
高度：210px；
浮动：左；
}
.包裹{
显示：内联块；
}
我知道您不想使用transforms，但它的工作原理与所描述的完全一样，并且实际上比flexbox具有更好的浏览器支持（尽管对于定期更新的浏览器来说，这是一个比正常情况更不具说服力的论点）

不管：

我们在这里做什么：

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

设置方向–我们将容器的左侧移动到顶部，顺时针旋转四分之一圈，使其从上到下旋转

翻转整个she bang–我们在Y轴上翻转容器，以确保方向正确（在本例中明显为
ltr
）

解决浮动清算问题–这是一个很好的资源

.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布局系统（boo、缓慢、讨厌、难以维护），或者做一些其他一些砖石布局以前必须做的事情：tuckpointing

我们将用虚拟项填充空白空间。这些可以是预先选择的图像、瓷砖，任何能够在不分散内容注意力的情况下，在实际内容的位置上添加闪光点的东西

我们是这样做的：


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

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

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

添加一个容易伪装的垫片伪元素

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

或者：您可以用一种不太喜欢CSS3但有更好支持的方式来实现这一点

这在小提琴方面的作用是创建一个小粉红框，从每个内容项的右侧弹出。如果那里已经有一个盒子，它就会被盖住。如果丢失了，我们会显示虚拟框。超级简单。
我需要从上到下再到下一列显示布局项。当你漂浮时，它们会向左向右然后向下。为什么漂浮对你不起作用？请详细解释你想做什么。你喜欢这样的布局吗？我有一个从左到右展开的水平布局（所以最新的帖子在左边，旧的在右边）。这就是为什么他们不能这样。它应该类似于float：左上角；与flex Columns连接，不包括
float:top left
。不过，我正在做一些事情。我似乎不明白。在网上也找不到任何东西。还有人知道这个问题的答案吗？请记住，浮动不是这个问题的选项。
s必须从上到下，而不是从左到右，不管怎么说，没有js是不可能的（我很难这么说，因为我喜欢只用CSS）。@coma，你的小提琴没有js不是吗？@Godisgood，是的，但是旋转所有东西和翻译都很难看，如果你尝试添加更多的大方块，它就会破裂。@coma，你是说没有JS这个布局是不可能的？我真的很喜欢这个解决方案，但是看看当我添加另一个
.big
时会发生什么。它仍然跳过了连续第二个div。有解决办法吗？如果我们说的是实际项目，没有。没有简单的解决办法。然而。。。可以这么说，你可以在砖石结构布局中做一些“插入点”的事情。这里是这样的：一个更好的解决方案：，我将把这个添加到原始答案中请考虑一下这个。我刚刚将整个容器翻了一番，预期结果是两组项目一个接一个，但它们彼此重叠。
.flex-i:after {
    content: '';
    height: 100px;
    width: 100px;
    left: 110px;
    top: 0;
    position: absolute;
    background-color: pink;
}
.flex-i.big:after {
    display: none;
}