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:

<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.

Answer 2

Update: To my knowledge, there is no way of doing this with Flexbox. Flexbox is more concerned with horizontal layout, not vertical. I would be happy to be proven wrong, but that’s what I’ve gathered from my limited experience with it. If you want to learn more, the best article I’ve found on the matter is this: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ (Yes, of course it’s Chris Coyier. How’d you ever guess?)

In any case, even if you can do it with Flexbox it would be a bit of a hack, because that isn’t what Flexbox is for. There’s a much cleaner way of doing it with CSS3 columns. Here’s an example.

Browser support isn't the greatest though: http://caniuse.com/#search=column%20layout Even this example doesn't seem to support Firefox, although I haven't a clue why, since FF does indeed support the respective properties, according to CanIUse.

So, a summary and TLDR: it's an admirable idea, doing this in pure CSS, but for most practical purposes is impossible at the moment. You would probably be better to go with JQuery Masonry

Answer 3

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:

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

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.

Answer 4

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;
}