Flexbox stacks of different ages.

I am creating an image portfolio website, and I need the images to stack according to their variable size. This is what I achieved with flexbox:

enter image description here

And this is where I try to get it !!

enter image description here

Does anyone know how to make children drain onto a flexbox screen? I swear I cannot find this particular structure anywhere in flexbox tutorials, although I have seen it several times on tumblr blogs.

This is my code: 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; 
}
+4
source share
1 answer

For those who might run into this, it seems that what you are looking for is called a Masonic layout, which can be achieved using flexbox as follows:

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

+2

Source: https://habr.com/ru/post/1614381/


All Articles