Flexbox堆叠不同高度的孩子

And*_*iro 10 html css flexbox

我正在建立一个图像组合网站,我需要根据图像的可变大小来堆叠图像.到目前为止,这是我用flexbox实现的:

在此输入图像描述

这就是我想要的地方!

在此输入图像描述

有人知道如何让孩子在Flexbox显示器上堆叠这种方式吗?我发誓我在flexbox教程的任何地方都找不到这个特殊的结构,虽然我已经在tumblr博客显示器上看过几次了.

这是我的代码:http: //jsfiddle.net/822h7ztd

.flexman {
    width:100%;
    padding: .2vw;
    flex-flow: row wrap;
    display: flex;
}
.flexman div {
    background: red;
    width: 100px;
    height:50px;
    margin: .2vw; 
}
Run Code Online (Sandbox Code Playgroud)

And*_*iro 8

对于任何可能遇到过这种情况的人来说,看起来像你正在寻找的是一个砌体布局,这可以通过这种方式用flexbox实现:

http://thenewcode.com/844/Easy-Masonry-Layout-With-Flexbox

  • 实际上,此解决方案不维护问题1-2-3-4中要求的顺序。 (2认同)