Masonry Layout in CSS3?

Answer 1

Here is a new answer and hope it solves your problem , following two Fiddles , to handle this issue , the first script will throw all odd children in the left side , and all even children on the right side

side1=0,side2=0

$(".flexbox").children().each(function(index, element) {
    if (index % 2 === 0) //odd children (starts with 0 )
    {
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
    }
else //even children
    {
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
    }   
});

http://jsfiddle.net/prollygeek/QD9kZ/

while this second fiddle , will balance the two sides based on elements heights so that there is no big deviation in the columns heights all the time , use any script of them it is up to you.

side1=0,side2=0
$(".flexbox").children().each(function(index, element) {
if(side1<=side2)
{
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
}
else if(side2<side1)
{
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
}

});

http://jsfiddle.net/prollygeek/hP6fS/

Answer 2

If there are only two columns, why not just use floats, alternating left and right floating/clearing for odd and even boxes?

.container {
    background-color: yellow;
    overflow: hidden;
    width: 100%;
}
.box {
    height: 100px;
    width: 50%;
}
.box:nth-child(odd) {
    float:left;
    clear: left;
}
.box:nth-child(even) {
    float:right;
    clear: right;
}
.box1 {
    background-color: lime;
}
.box2 {
    background-color: blue;
    height: 120px;
}
.box3 {
    background-color: red;
    height: 140px;
}
.box4 {
    background-color: green;
}

<div class="container">
    <div class="box box1">child 1</div>
    <div class="box box2">child 2</div>
    <div class="box box3">child 3</div>
    <div class="box box4">child 4</div>
</div>

Answer 3

.flexbox {
    background-color: yellow;    
    width: 100%;
    height: 300px;
}
.box {
    float:left;
    position:realtive;    
    height: 100px;
    width:50%;
}

try adding and removing children !!

http://jsfiddle.net/prollygeek/8hHDg/5/

Answer 4

Flexbox cannot be used to recreate the Masonry layout. Period.

Flexbox is for controlling how elements flow along either a horizontal row (flex-direction: row, which is the default) or vertical column (flex-direction: column). That means you can only eliminate excess space in one direction: left/right (row) or top/bottom (column). Because flex-direction: column requires an explicit height to enable wrapping, it is entirely unsuitable for this purpose.

The CSS Multi-column Layout Module is the closest you can get to recreating a Masonry layout using pure CSS, but it still only allows you to eliminate excess space between the elements in one direction: vertically. The key difference between this and Flexbox (using the column direction) is that the Multi-Column module does not require an explicit height and will distribute the contents equally between each of the columns as best it can (this can be controlled via the column-fill property). The gap between the columns is controlled by the column-gap property.

http://codepen.io/cimmanon/pen/CcGlE

.my-element {
  -moz-columns: 15em;
  -webkit-columns: 15em;
  columns: 15em;
}

Answer 5

For boxes of the same size:

If you're using flexbox, you'll want to use flex-direction: row; and flex-wrap: wrap;

I forked your JSFiddle. All flex-box properties I added are prefixed with -webkit- only

References:

• A Complete Guide to Flexbox
• How do I implement a multi-line flexbox?

---

For boxes of multiple sizes:

You'll need a 'masonry' layout. This article should help you with this issue. The last section is entitled 'Pure CSS'; if you want to avoid JavaScript plugins, that should be what you want.

Unfortunately, pure CSS is only able to make top-to-bottom left-to-right layouts. For left-to-right top-to-bottom layouts, you'll need JavaScript. Check out the jQuery suggestions in the article above.

If you want to do this with pure JavaScript (without jQuery), check out this masonry library.