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

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:

    

        

          
            
0) Craft beer farm-to-table.
        
        

            
            
1) Mollit wolf veniam, leggings art party semiotics Brooklyn High Life sustainable occaecat Banksy actually.
        
        [more items]
    

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.