Masonry Layout in CSS3?
css, flexbox, html
Solution
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/
Problem
I try to use the following structure to generate the layout described below. ``` <div class="flexbox"> <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> ``` I made an example for that here. The layout should be as follows: - if there is only one box inside the flexbox it should have 50% of the width inside the flexbox (see following figure) - if there are two boxes they both should take 50% of the space inside the flexbox - if there are three boxes, each box should take 50% of the space, while the first two boxes are in row 1 and the third box appears in row 2 How can I achieve this kind of layout with css? Edit: The boxes might not have the same height. This means they should fill the remaining space vertically. The width is always the same. See the following image for an example. Edit: I found a way to make masonry with pure css see here: http://jsfiddle.net/confile/aGXzU/ The problem is that the boxes are in the wrong order. They should be from left to right and from top to bottom like this: ``` 1 2 3 4 5 6 7 8 9 ``` Is there a way to get this with css and only little javascript?