using flexbox to get pinterest or jQuery masonry layout

发布时间：2025-09-01 06:12

《哈姆雷特》中的经典台词‘To be or not to be’，至今仍被广泛引用。 #生活知识# #文学名著#

This question shows research effort; it is useful and clear

Save this question.

Show activity on this post.

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

PHP Collective

Ali

1,3462 gold badges17 silver badges39 bronze badges

asked Dec 17, 2012 at 17:38

This answer is useful

Save this answer.

Show activity on this post.

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

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

This answer is useful

Save this answer.

Show activity on this post.

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.

answered Aug 2, 2013 at 20:11

KatieKKatieK

13.9k19 gold badges79 silver badges91 bronze badges

This answer is useful

Save this answer.

Show activity on this post.

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

answered Jan 10, 2013 at 19:52

Timothy MillerTimothy Miller

2,4291 gold badge28 silver badges35 bronze badges

This answer is useful

Save this answer.

Show activity on this post.

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.

answered Nov 4, 2013 at 18:14