反转div顺序多行

Question

我正在尝试使用CSS获得以下结果。

我希望第一个div从右下角开始。当添加第二个div或第三个div时，它需要将自己放在左侧前一个div的旁边，如下所示：

| div 3 | div 2 | div 1

考虑使用一个包装器div来包装div后面的下一个div(div 4、5和6(。通常情况下，div会随着文档的流程而进行，并位于前三个div之下。我想换一种方式：

| div 7
| div 6 | div 5 | div 4
| div 3 | div 2 | div 1

我怎样才能做到这一点？

Answer 1

我觉得在几分钟内解决自己的问题有点愚蠢，而之前我在这个问题上磕磕碰碰了好几个小时，但我正在查看flex-wrap: wrap-reverse。反包在这里很重要。使用以下代码，结果实际上非常简单：

.container {
width: 700px;
margin: 0 auto;
border: 1px solid coral;
display: flex;
flex-direction: row-reverse;
align-content: end;
flex-wrap: wrap-reverse;
}

希望能帮助别人！