box-orient in both direction? - html

Question

What I am trying to do here is to make the <div>s (9 in my demo) to arrange like 井 (a 3x3 grid). My approach is to use the flexible box layout to make them spread evenly across the whole area.
<div id="container">
<div>1</div>
...
<div>9</div>
</div>
#container {
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
width: 300px;
height: 300px;
}
#container > div {
-webkit-box-flex: 1;
border: 1px solid black;
height: 50px;
}
However, this will make them line up in a single axis. I can change the orientation to vertical or horizontal, but not both. What is a better (and working) way to achieve this with only CSS? The float: left trick won't work here because the size of the container will vary.

Answer 1

You're actually looking at the wrong specification. The 2009 specification is being phased out in favor of the CR draft from Sept. 2012. To make a 3x3 grid with flexbox, you need to enable wrapping. The property from the 2009 draft for that was called box-lines, but the last remaining browser that follows that spec (Firefox) never implemented it.
http://jsfiddle.net/aUSWE/1/ (prefixes not included)
#container {
display: flex;
flex-flow: row wrap;
width: 300px;
height: 300px;
border: 1px solid black;
resize: both;
overflow:auto;
}
#container > div {
flex: 1 1 33%;
border: 1px solid black;
box-sizing: border-box;
}

Answer 2

http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/#flex-order
It seems to me like the w3 standard for flexbox explicitly requires them to be either horizontal (LR/RL) or vertical (TB/BT), so I don't believe you can explicitly call for a 3x3 grid. As noted in the comments, the simplest solution seems to be three vertical flexbox divs with 3 horizontal flexbox divs inside of them (or the inverse). Unnecessary divs, indeed, but what else is CSS about? :)
You might look into grid-layout (http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ ) since that seems like it's the grid cousin of flexbox. (Of course, that would be if you're designing solely for IE 10... http://caniuse.com/css-grid )