Is there a way of doing this with flexbox? - css

Question

My main <div> have a fixed height, but when I try to use box-orient: horizontal on it, they stay all above the first <div>, even with an overflow hack.
I'm stuck. This is what I need:
and this code:
<style>
.box {
outline: 1px solid red;
width: 1000px;
height: 450px;
overflow: hidden;
display: box;
box-pack: center;
box-align: center;
box-orient:vertical;
}
.boxitem {
width:150px;
height:200px;
background:#ccc;
}
</style>
<div class="box">
<div id="box1" class="boxitem">flexbox item 1</div>
<div id="box2" class="boxitem">flexbox item 2</div>
<div id="box3" class="boxitem">flexbox item 3</div>
</div>

Answer 1

You're using properties from the 2009 spec, which is being phased out in favor of this draft: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/. You actually need box-orient: vertical from the 2009 spec, but that still won't help you because as far as I can tell, no one ever implemented box-lines: multiple to enable wrapping. You need the ability to wrap if you only want to use one flex container element.
So, the code below will cover all of your bases for browsers that supports the Flexbox spec in its entirety: Opera, Chrome, IE10.
http://jsfiddle.net/FwfDV/
.box {
outline: 1px solid red;
width: 1000px;
height: 450px;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-flex-pack: justify; /* optional */
-ms-flex-pack: justify; /* optional */
-webkit-justify-content: space-between; /* optional */
justify-content: space-between; /* optional */
}
#supports (display: flex) and (flex-wrap: wrap) {
.box {
display: flex;
}
}
.boxitem {
width: 150px;
height: 200px;
background: #ccc;
}
<div class="box">
<div id="box1" class="boxitem">flexbox item 1</div>
<div id="box2" class="boxitem">flexbox item 2</div>
<div id="box3" class="boxitem">flexbox item 3</div>
<div id="box4" class="boxitem">flexbox item 4</div>
<div id="box5" class="boxitem">flexbox item 5</div>
<div id="box6" class="boxitem">flexbox item 6</div>
</div>
However, if your "boxitem" elements are regular/fixed sizes like this, I recommend using CSS Columns instead, which has a bit wider support and can do nearly the same job.