2 回答
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;
}
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 )