Question

我trying to do here的目的是让<div> s（在我的演示中为9）排列为井（3x3网格）。我的方法是使用灵活的盒子布局，使它们在整个区域均匀分布。

<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;
}

然而，这将使它们在单个轴上对齐。我可以将方向更改为vertical或horizontal，但不能同时更改为两者。仅用CSS实现这一目标的更好（和工作）方法是什么？ float: left技巧在这里不起作用，因为容器的大小会有所不同。

Answer 1

你实际上在查看错误的规范。从2012年9月开始逐步淘汰2009年规范以支持CR草案。要使用flexbox制作3x3网格，您需要启用包装。 2009年草案中的属性称为box-lines，但是遵循该规范的最后一个浏览器（Firefox）从未实现过。

http://jsfiddle.net/aUSWE/1/（不包括前缀）

#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

在我看来，像flexbox的w3标准明确要求它们是水平（LR / RL）或垂直（TB / BT），所以我不相信你可以明确地要求3x3网格。正如评论中所指出的，最简单的解决方案似乎是三个垂直的flexbox div，其中有3个水平的flexbox div（或者反向）。确实有不必要的div，但CSS还有什么其他内容？：）

你可能会研究网格布局（http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/），因为这似乎是flexbox的网格表格。（当然，如果你只为IE 10设计...... http://caniuse.com/css-grid）

箱子朝两个方向？

2 个答案: