using flexbox to get pinterest or jQuery masonry layout

Question

Wanted to know if it is possible to get the same type of design layout as pinterest or jQuery masonry using only the new flexbox layout. Here is as far as I got it:

Answer 1

You can actually do it without any greater hassle using flexbox. The only drawback is that you have to specify an absolute height for the wrapper, in order to make the content of it actually wrap. Otherwise it would all be laid out along one great, never ending column.

The HTML:

The (unprefixed) CSS:

.wrapper {
    background: black;
    display: flex;
    flex-flow: column wrap;
    height: 450px;
    align-items: center;
}

.wrapper > div {
    height: 100px;
    margin: 5px;
    width: 100px;
}

.wrapper > :nth-child(3n+2) {
    border: 2px solid white;
    height: 300px;
}

I made a JS Fiddle as well, so you can see the result directly.

In a nutshell however, the trick is to use flex-direction: column in combination with flex-wrap: wrap and a fixed height for the wrapper.

I have to add, though - this seems like just the scenario that the CSS columns spec was written for, so KatieK's solution might be a better way to go. Above all, one doesn't need to specify a fixed height for the wrapper when using CSS columns instead of flexbox.