23

I'm building an image portfolio site, and I need the images to stack depending on their variable size. This is what I have achieved with flexbox so far:

enter image description here

And this is where I'm trying to get!!

enter image description here

Does someone know how to make children stack this way on a flexbox display? I swear I can't find this particular structure anywhere on flexbox tutorials, though I've seen it several times on tumblr blog displays.

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; 
}
Andratwiro
  • 655
  • 1
  • 5
  • 11
  • 1
    @alirezasafian, when I first started on this site I also manually typed in "Possible duplicate of ..." But it's actually an automatic post that occurs when you're the first to vote to close the question for being a duplicate. Click "close" next time. – Michael Benjamin Nov 04 '15 at 03:16
  • 1
    @Michael_B Noted, tnx. – Alex Nov 04 '15 at 03:19
  • 3
    There you go - https://codepen.io/balazs_sziklai/pen/mOwoLg seems just what you want. – vovchisko May 22 '18 at 17:50

1 Answers1

17

For anyone who might have encountered this, seems like what you are looking for is called a Masonry layout, which can be achieved with flexbox this way:

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

Andratwiro
  • 655
  • 1
  • 5
  • 11