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:

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.item {
    width: 220px;
    height: 250px;
    margin: 10px auto;
    padding: 0;
    background: #ccc;
}
.item:nth-child(3n+2) {
    background: #aaa;
    height: 400px;
}

and the HTML I am just using a PHP loop to create 12 items

<?php
    for ($i=0; $i<=11; $i++) {
        echo '<div class="item"></div>';
    }
?>

Answer 1

It is entirely possible.

Thanks to @leopld's original answer, I was able to create one that does not depend on a fixed height.

By making the flex container position: absolute or position: fixed, you are able to get it to fill the available space dynamically.

Link to the Codepen: http://codepen.io/anon/pen/Jpnyj?editors=110. I included all the vendor prefixes you'd need at this time.

Markup

<div class="wrapper">
    <div class="box box-red"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-brown"></div>
    <div class="box box-red"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-blue"></div>
    <div class="box box-pink"></div>
    <div class="box box-purple"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-red"></div>
    <div class="box box-brown"></div>
    <div class="box box-blue"></div>
    <div class="box box-red"></div>
    <div class="box box-green"></div>
    <div class="box box-yellow"></div>
    <div class="box box-brown"></div>
</div>

Styles

body {
    background: black;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

.box {
    margin: 5px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

.box-red {
    height: 100px;
    background: red;
}

.box-blue {
    height: 120px;
    background: blue;
}

.box-pink {
    height: 144px;
    background: pink;
}

.box-purple {
    height: 250px;
    background: purple;
}

.box-green {
    height: 200px;
    background: green;
}

.box-yellow {
    height: 20px;
    background: yellow;
}

.box-brown {
    height: 290px;
    background: brown;
}

Answer 2

CSS3's columns will get you pretty close to that layout. (Note that support in non-recent browsers may be poor, and the spec may change in the future.) The other example didn't work with FF, but this one does:

HTML:

<div id="wrapper">
    <div id="cols">
        <div class="item">
          <img src="http://placekitten.com/400/700?image=1" />
            <p>0) Craft beer farm-to-table.</p>
        </div>
        <div class="item">
            <img src="http://placekitten.com/400/450?image=2" />
            <p>1) Mollit wolf veniam, leggings art party semiotics Brooklyn High Life sustainable occaecat Banksy actually.</p>
        </div>
        [more items]
    </div>
</div>

CSS:

h1, h2, ul, p { margin: 1rem; }

#wrapper {
    width: 900px;    
    margin: 20px auto;
    padding: 10px;
    outline: solid black 1px;
    background-color: gainsboro;  
}

#cols {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}

.item {
    display: inline-block;
    background: #FEFEFE;
    margin: 0;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
}

.item img {
    width: 100%;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.item p {
    font-size:small;
    margin: 0;
}

Or play with the full example.