小编sig*_*ram的帖子

有一次,我为此提出了一个CSS规范建议,但后来我认为可能已经有了一个我缺少的解决方案.我正在谈论的那种布局的一个例子看起来像这样:

+-----------+---+
|     1     | 6 |
+---+---+---+   |
| 2 | 3 | 4 +---+
+---+---+---+ 7 |
|     5     |   |
+-----------+---+

问题是左列中间的那三个框沿着十字轴堆叠,我在CSS中找不到一个机制来执行此操作.我知道这可以通过包裹这三个项目的div来完成,这三个项目是行方向flex布局,但是这种方法打破了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: …