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

フレックスボックスの w3 標準では、明示的に水平 (LR/RL) または垂直 (TB/BT) のいずれかである必要があるように思われるため、3x3 グリッドを明示的に呼び出すことはできないと思います。コメントに記載されているように、最も簡単な解決策は、3 つの垂直フレックスボックス div とその内部に 3 つの水平フレックスボックス div (またはその逆) のようです。確かに不必要な div ですが、それ以外に CSS とは何なのでしょうか? :)

grid-layout ( http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ ) を調べると、それはフレックスボックスのグリッドのいとこのように見えるからです。（もちろん、IE 10専用に設計している場合はそうです... http://caniuse.com/css-grid）

于 2013-02-22T03:30:10.883 に答える