1
4

2 回答 2

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;
}
于 2013-02-22T03:53:20.203 回答
1

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 )

于 2013-02-22T03:30:10.883 回答