【发布时间】：2015-05-27 17:17:58
【问题描述】：
在某一时刻，我正在玩弄一个 CSS 规范建议，但后来我想可能已经有一个我缺少的解决方案。我正在谈论的布局示例如下所示：
+-----------+---+
| 1 | 6 |
+---+---+---+ |
| 2 | 3 | 4 +---+
+---+---+---+ 7 |
| 5 | |
+-----------+---+
问题是左列中间的那三个框是沿交叉轴堆叠的，我在 CSS 中找不到这样做的机制。我知道这可以通过将 div 包裹在行方向 flex 布局的这 3 个项目周围来完成，但这种方法破坏了 flex 布局的灵活性，因为这些项目不能再围绕外部布局和列重新排序/他们之间不能再发生换行。那么，如何仅使用 CSS 来实现这一点，让 flex 布局保持灵活？
HTML：
<div id="flex-layout">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
<div id="item6">6</div>
<div id="item7">7</div>
</div>
CSS：
#flex-layout {
display: flex;
flex-direction: column;
height: 300px;
width: 400px;
flex-wrap: wrap;
align-items: stretch;
}
#item1 {
flex: 0 0 100px;
width: 300px;
}
#item2 {
flex: 0 0 100px;
width: 100px;
}
#item3 {
flex: 0 0 100px;
width: 100px;
}
#item4 {
flex: 0 0 100px;
width: 100px;
}
#item5 {
flex: 0 0 100px;
}
#item6 {
flex: 0 0 150px;
width: 100px;
}
#item7 {
flex: 0 0 150px;
}
【问题讨论】：
-
你能展示一下你到目前为止写的东西吗？
-
这只是一个假设案例的模型，但我为它添加了一些代码。
-
如果您不介意将 6 和 7 放在另一个 flex 容器中，您可以使用行布局。
-
@Oriol 我知道这也是一个选项，但我想完全避免编辑 HTML 以保留 flex 布局的精神，否则这似乎是当前的 flex 布局规范。如果它实际上是当前规范中的一个缺点，那么我有一个想法可以解决这个缺点，但我想确保我不会在某处掩盖现有的解决方案。